So-net無料ブログ作成
検索選択

Androidのブラウザでテキスト文字が折り返しされる

先日、シャープのAndroidスマートフォン SH-06Dを購入して、いろいろなPC向けサイトを見ていたところ、テキストの文字が中央付近で、折り返され、改行されるような現象に出くわしました。

再現機種は、Sh-06D、Androidバージョン4.0.4です。

 

シャープ改行

シャープサイトより
http://www.sharp.co.jp/bd/product/bd-w1200_520/features.html

赤丸で囲ったスペースが改行されている部分です。文章が中央で折り返しになり、左に寄ってしまっています。

 

シャープ改行なし

本来のレイアウトは、このようになっていて、折り返しはありません。

このように、テキストが改行される原因ですが、Androidのブラウザの「ページの自動調整」の機能がオンになっていることが原因です。この機能を切ることで、改行されなくなります。

 

メニュー→設定

ブラウザ表示の時に、メニューボタン(スマホの下にある3つの内、一番左側)を押下して、設定を選びます。

 

高度な設定

高度な設定をタッチします。

 

 

ページの自動調整

ページの自動調整のチェックを外して機能をオフにします。これで、テキスト文字が改行しなくなりました。

で、ふとしたことでこの改行を回避する方法を見つけました。

 

androidのbrowserで改行される1

テキストを囲っているタグに、背景色を指定すると改行されなくなります(画像クリックで拡大します)。

 

<p style="background-color:#fff;">Androidのブラウザで~</p>

 

ただ、すでにテキストの後ろに配色指定や画像がある場合には、使えません。

また、background-colorの他に、background-imageでも改行されなくなります。

 

Androidのブラウザでテキスト文字が折り返しテスト

bodyにbackgroundで背景色#dddを指定した状態での各状況。上からPタグに指定なし、背景色指定、背景画像指定。背景画像(xxx.gif)は存在しないダミー。

上記サンプルページは下記に置いてあります。
http://www016.upp.so-net.ne.jp/gootre/android-bscr-test.html

個人的には、この改行の為にわざわざソースをいじらなくてもいいような気がします。見た目の問題だけですので。

というわけで、もしウェブ制作の人がお客さんから指摘を受けてしまったら、上の設定で正しく表示されますと伝えればいいかと。

もし、納得しないようであれば、、、

 

東大改行

東大医学部サイトより http://www.m.u-tokyo.ac.jp/daigakuin/apply/message.html

 

「東大医学部のサイトでも同様ですので、気にすることはないです(キリッ」と、権威をお借りして説得すれば、納得してもらえるでしょう。

余談ですが、ブラウザでアドレスの入力ミスをした時に出る、

 

ページが見つかりませんでした

「ページが見つかりませんでした」ですが、なんでこんな中途半端な所で、折り返しているんだと思っていたのですが、上記の設定変更したら、

 

ページが見つかりませんでした

折り返しせず、表示されました。。。

googleの中の人って、こういう動作あまり気にならないんでしょうか。ジョブズだったら、即修正指示出しそうなイメージですが。

 
 

 

Facebook コメント