WordPressのパソコン用ホームページをスマホで見た時に画面が大きく表示されてしまうのを解決する方法

先日、WordPressのパソコン用ホームページをスマホで見た時に画面が大きく表示されてしまう、ということがありました。

私が作成したホームページでは、そのようになってしまうケースとならないケースがあり、原因はよく分からないのですが、WordPressのプログラムが親切心からそういう仕様が効いてしまうケースがあるのかなと思います。

解決方法は下記2点で解決出来ることがわかりました。

1). スタイルシートのbodyの欄に下記のタグを追加

body {
-webkit-text-size-adjust: 100%;
}

2). viewportの設定

<meta name=”viewport” content=”target-densitydpi=device-dpi, width=device-width, maximum-scale=1.0, user-scalable=yes”>

をheadタグ内に置く。

ホームページの横幅が950pxの場合は、widthを960pxくらいに設定して、下記のようにしておくとよいと思います。

<meta name=”viewport” content=”target-densitydpi=device-dpi, width=960, maximum-scale=1.0, user-scalable=yes”>

以上で解決しました。

 

PS

なお、レスポンシブWebデザインによるスマホ対応の場合は、上記2).のviewportの設定を

<meta name=”viewport” content=”width=device-width,user-scalable=no,maximum-scale=1″>

に設定になります。(widthに数値を指定しないようになります。)