スマホでwidth指定が有効にならない

CSSでWidthを100%など指定しても、アンドロイドのブラウザで見ると、有効にならない場合がいあります。その場合の解決策。

home HOME about About this site Mail Mail

スマホでwidth指定が有効にならない

 

Last update 2016-05-23 07:35

twitter Facebook はてブ LINE pocet

 

アンドロイドでサイトを見た場合久々にアンドロイド端末でこのサイトを表示させてみたところ、H1タグやH3タグ、そして本文のPタグで囲まれた文字列が、中途半端な所で強制的に折り返されて、見にくい表示になっているのに気が付きました。
このサイトは、一応スマートフォンで見た時に、幅480pxとして表示させているのですが（詳しい設定は、viewportとはを参考に）、どうも画像やテーブルタグなどはきちんと480pxに合わせて表示してくれてるっぽいのに、文字列を表示させるようなタグ（HタグやDIV、Pなど）は、いくら「width」の指定を変更しても有効になりません。

Sponsored Link

 

これはどのアンドロイドでも同じ現象で、ブラウザを変更しても同じ現象になってしまうようです。
今回私が試したのは、「Optimus it」と「SH-02E」なんですけれど、両方同じように変な部分で改行されてしまいます。

iPhoneの場合iPhoneで見ると、きちんと画面の隅まで折り返されずに表示されていました。

widthを100%にしている先ほどの■色で囲った部分は、「H1」タグで囲まれた部分で、ここのCSSは、このように

width : 100%;

と指定してあります。
にも関わらず、変な場所で折り返されてしまう・・・。

background-color

background-colorを指定するといろいろ試行錯誤してみると、どうもCSSで「background-color」を指定してやるとwidthが有効になるっぽい。
原因は不明。単なるバグでしょうか？
例えばH1タグのbackground-colorを#F93に指定してやると・・・

widthが有効になったこのようにwidthの指定が急に有効になりました。というか、widthで100%に指定しなくても、画面の隅で折り返されるようになりました。
もし、スマホ用サイトを作っていてwidthで指定しても有効にならない！とか、変な所で折り返されてしまう！なんて人は「 background-color 」を指定してみてください。
もちろん「#FFF」に指定すれば、白色に指定出来ます。

関連ページ

最終更新日 2016-05-23 07:35

 

twitter Facebook はてブ LINE pocet

Sponsord Link

 

 

投稿日：2013-07-13 | このページのトップへ | コメントを書く | 管理