スマホで拡大表示ができなかったサイトのタグ修正方法。

   2015/04/28

WordPressでレスポンシブデザインのサイトを作成しようと思ったら、ヘッダーのmeta要素に name=”viewport” を追加すると、文書の表示領域を設定することができます。

また、購入したレスポンシブテーマでサイトを作成したあとスマートフォン閲覧のとき、ピンチアウト(拡大)して見たかったのにできなかったという時も、ヘッダーのmeta要素、name=”viewport” を編集すると、拡大(縮小)表示が可能になります。

ピンチアウトで拡大できないタグ例

header.php 内のmetaタグが下記の場合だったら・・・。

<meta name="viewport" content="width=device-width,
initial-scale=1.0, user-scalable=no, minimum-scale=1.0,
maximum-scale=1.0">

私流に説明します。

<meta name="viewport" 
content=&quot;width=device-width(表示の幅をスマホ画面の幅に合わせる),
initial-scale=1.0(初期のズーム倍率は1.0倍), 
user-scalable=no(ズームの操作を許可しない),
minimum-scale=1.0(縮小倍率は1.0倍), 
maximum-scale=1.0(拡大倍率は1.0倍)">

  • initial-scale=1.0(初期のズーム倍率)はminimum-scale~maximum-scaleの範囲内の倍率を指定します。
  • 上記の場合、ズームの操作プロパティuser-scalable=をyesに変えても、縮小倍率プロパティminimum-scale=も、拡大倍率プロパティmaximum-scale=も、共に1.0倍なので、ピンチアウトしてもピンチインしても何も変わりません。

ピンチアウトで拡大できるタグに修正

と言うことで、今回は「縮小しても倍率は変わらず、拡大すると2.0倍までズームする」という設定に変更します。

<meta name="viewport" content="width=device-width,
initial-scale=1.0, user-scalable=yes, minimum-scale=1.0,
maximum-scale=2.0">

いかがでしょうか?

user-scalable=プロパティno を yes にしてサイトのレイアウトを崩してもいいのかどうか?
そこら辺は臨機応変に・・・・!

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す