2014年3月26日水曜日

Bloggerのモバイル表示幅が広すぎる

 
ここ数ヶ月、bloggerのモバイル テンプレートで『カスタム』を選択した際に、モバイル デバイスにおける表示幅が異様に広くなるという事象に悩まされておりました。他のモバイル テンプレートではこの事象は発生いたしません。最初はviewportの設定の問題かと思われたのですが、何をどうやっても改善されませんでした。

ちなみに表示幅が広いとはいうものの、モバイル デバイスでは一見何の問題もなく見ることができます。ただ、横スクロールバーが表示され、右側に何もない表示域が1000px以上続くといった感じでした。

色々と調べてみたところ、HTMLの以下の記述が問題でした。
#header-inner {
margin: 0 auto;
width:1600px;

私のPCのモニターの幅は1280pxなのでこのような設定をした心当たりは無いのですが、何かの拍子に1600pxという表示幅が設定されたのかもしれません。この表示幅がモバイル デバイスにも適用され、表示されたときに右側に大きな余白が発生していた模様です。結局、widthの記述を削除することで一応の解決となりました。

この問題の解決のきっかけとなったのはGoogleのWebサービスであるPageSpeed Insights [Page]です。このページでサイトの解析を行った際に、モバイル画面における幅が1600pxと設定されていると表示されました。そして1600という数字をHTMLで検索して上記の記述を発見したわけです。

参考までに以下はviewportの設定が無視される現象に関するBBSのトピックです(英語)。問題はJavascriptで画面の幅を設定をしていたために、それがviewportより優先されていたことが原因のようです。

Meta viewport tag seems to be ignored completely or has no effect [Page]


0 件のコメント:

コメントを投稿