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

WEBデザイン

2014.09.012019.09.25

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

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

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

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

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

&lt;meta name="viewport" content="width=device-width,
initial-scale=1.0, user-scalable=no, minimum-scale=1.0,
maximum-scale=1.0"&gt;

私流に説明します。

&lt;meta name="viewport"
content=&amp;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倍)"&gt;

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

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

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

&lt;meta name="viewport" content="width=device-width,
initial-scale=1.0, user-scalable=yes, minimum-scale=1.0,
maximum-scale=2.0"&gt;

いかがでしょうか？

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