HOME サイトマップ 営業日カレンダー お問い合わせ

Androidの標準ブラウザで、テキストが自動改行(1)


株式会社コニファ・ロゴ




Androidスマートフォンの標準ブラウザで、テキストが自動改行(2)



株式会社コニファ・無料で使えるBtoB WEB受注システム・0万石 WEB受注システム(バナー用3)
無料で使えるBtoB WEB受注システム,0万石受注システム,0円,Free
無料で使えるBtoB WEB受注システム
0万石 WEB受注システム

Androidスマートフォンの標準ブラウザ(地球儀アイコン)で、長めのテキストが真ん中付近で自動改行されてしまうことがあります。

Androidスマートフォンを縦持ち(portrait)のときにはテキストの真ん中付近で、横持ち(landscape)のときは、左から2/3付近で自動改行されることがあります。これはスマートフォンの比較的小さな画面で、自動改行して見やすくするためのものらしいのですが、Androidスマートフォンは、iOSなどに比べると数えきれないほどの種類があり、画面サイズも多種多様です。それを一律に「真ん中付近で改行」というのはちょっと乱暴な気がします。


画像中央で、テキストが自動改行され、左により、その右が空いています。

ちなみに、この問題が起きるのはAndroid4までの標準ブラウザ(地球儀アイコン)で、Android4.1からAndroidの標準になった「Chrome」では、起きないようです。

◆ユーザー側の対処(自動改行させない):

ブラウザ画面右上の「設定」ボタンから→「設定」→「高度な設定」→「ページの自動調整」と進み、「ページの自動調整」のチェックを外して、この機能を無効にします。

◆サーバー側の対処(自動改行させない):

自動改行されてしまうテキストを内包するタグ、例えば<p>タグに直接「style="background: #ffffff;"」などと記述して色や画像を指定します。

サンプル

Android標準ブラウザ(地球儀アイコン)で見てください。

自動改行されてしまいます(囲っているpタグに"background:"指定無し)

[ダミーテキスト] ポイントカードを発行し、商品の購入者に対し,次回以降の買い物の際に支払いの一部に充当できるポイントを提供する場合は、景品ではなく値引。 取引通念上妥当と認められる基準に従い、取引の相手方に対し、支払うべき対価を減額すること又は割り戻すことは、値引と認められる経済上の利益に該当し、景品表示法上の景品類には該当しません。

問題は起きません(囲っているpタグに"background:#ffffff;"を指定)

[ダミーテキスト] ポイントカードを発行し、商品の購入者に対し,次回以降の買い物の際に支払いの一部に充当できるポイントを提供する場合は、景品ではなく値引。 取引通念上妥当と認められる基準に従い、取引の相手方に対し、支払うべき対価を減額すること又は割り戻すことは、値引と認められる経済上の利益に該当し、景品表示法上の景品類には該当しません。

問題は起きません(囲っているpタグに"background:url(img/spacer.gif);"を指定)

[ダミーテキスト] ポイントカードを発行し、商品の購入者に対し,次回以降の買い物の際に支払いの一部に充当できるポイントを提供する場合は、景品ではなく値引。 取引通念上妥当と認められる基準に従い、取引の相手方に対し、支払うべき対価を減額すること又は割り戻すことは、値引と認められる経済上の利益に該当し、景品表示法上の景品類には該当しません。

自動改行されてしまいます(囲っているpタグの親要素に"background:#ffffff;"を指定)

[ダミーテキスト] ポイントカードを発行し、商品の購入者に対し,次回以降の買い物の際に支払いの一部に充当できるポイントを提供する場合は、景品ではなく値引。 取引通念上妥当と認められる基準に従い、取引の相手方に対し、支払うべき対価を減額すること又は割り戻すことは、値引と認められる経済上の利益に該当し、景品表示法上の景品類には該当しません。


【追記】

いろいろ試した結果、自動改行を無効にする際、改行されてしまう要素がブロックレベル要素かインライン要素かで、対応が違ってきます。

pやdivなどのブロックレベル要素の場合は、そのタグに直接「style="background: #ffffff;"」などと記述して、要素のバックグラウンドに色や画像を指定します。


インライン要素、例えば<span>要素では、そのタグに「style="background: #ffffff;"」を指定しても、修正できません。この場合、<span>要素の親要素のブロックレベル要素に指定するか、<span>要素自身をcssの「display:inline-block」などを使ってブロックレベル要素に変換してから「background:#ffffff;」を指定します。


次のページでは、ブロックレベル要素とインライン要素のケースについてやや詳しく試しています。
→ Androidスマートフォンの標準ブラウザで、テキストが自動改行(2)




株式会社コニファ:ミニbanner画像include用-1(フルパス)

株式会社コニファのSaaS、ASP

  • ハンディターミナルを活用したシステム開発
  • SATOラベルプリンタ用システム開発
  • 耐洗ラベルプリントシステム開発
  • 定期配達・回収品管理システム
  • 無料で使える,0万石在庫照会システム,0円,Free
  • BtoB WEB受注システム
  • 0万石 WEB受注システム
  • 購買システム,既存のホストを利用するEDI連動型・百万石 購買システム,小口の仕入先,電子化,納期情報,コメント
  • 「BtoB WEB受注システム」PKI認証対応版
  • 「BtoB WEB受注システム」スマートフォン・iPad対応版


 

コニファHOME | サイトマップ | 会社案内 | お問い合わせ

copyright © 2019 Conifer,Inc. All rights reserved.