情報科学屋さんを目指す人のメモ

方法・手順・解説を書き残すブログ。私と同じことを繰り返さずに済むように。

【HTML】高解像度端末でモバイル用CSSを読み込まなかった原因と対策

CSS (6) HTML (15) Xperia Z2 SO-03F (22)

Xperia Z2 SO-03F でページを表示してみると、Nginxでのモバイル判定は上手くできていてHTMLはモバイル用が出力されているものの、モバイル用のCSSが読み込めていませんでした。そのときの原因と対策をメモしておきます。

原因:max-device-width

モバイル用HTMLには、画面サイズよってCSSを読み込むかどうかが変わるコードを指定していました。

<link media="only screen and (max-device-width:960px)" href=".../style-smartphone.css" type="text/css" rel="stylesheet" />

この場合、横幅が960px以下の端末なら、このCSSを読み込むことになります。

iPhone 5s(640px)など、今まで持っていた端末ではこれでちゃんとCSSが読み込まれていました

しかし、最近購入した Xperia Z2 SO-03F(横幅1080px)をはじめ、最近の人気Android端末の Xperia Z1(1080px)、Galaxy S4(1080px)、Galaxy S5(1080px)はどれも横幅が960pxより長く、このCSSが読み込まれていませんでした

対策:CSSを直接指定する

このCSSを読み込むコードは、そもそもNginxでモバイル判定をする前に、振り分けの代わりに書いていたものだったので、もう必要のないものでした。

というわけで、ディスプレイサイズによる振り分けをしないで読み込むようにして、解決出来ました

<link rel="stylesheet" href=".../style-smartphone.css" type="text/css" media="screen">

コメント(0)

新しいコメントを投稿