スポンサーリンク
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）
新しいコメントを投稿
<< NEW 『【CSS3】アイコン画像を使わずにCSSのみで外部リンクアイコンを設置した方法メモ』
｜HOME｜
『IE10のユーザーエージェントでアクセスしてくる謎のロボットについてメモ』 OLD >>
｜HOME｜
『IE10のユーザーエージェントでアクセスしてくる謎のロボットについてメモ』 OLD >>
スポンサーリンク