PC用のweb画面をスマホにて拡大は出来るのですが、縮小できません。

Question

PC用の申し込みフォームを実装しました。
レスポンシブル対応はしておりません。

そこで、最低限スマホでピンチイン・ピンチアウトによる拡大・縮小が出来るように対応しようと思い、以下のようにmetaタグを修正しました。

修正前

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

修正後

<meta name="viewport" content="width=device-width,initial-scale=1">

その結果、拡大はできるようになったのですが、縮小することは出来ませんでした。
設定方法が間違っているのか、そもそも縮小することが不可能なケースがあるのか教えてください。

Comments

[yoshinavi]

縮小出来ないと言うのは、一度ピンチアウトで拡大したら、元のサイズに戻せないと言う事でしょうか？

Answer 1

例えばページの横幅が960pxだったとして、スマートフォンの画面横幅が360pxだとします。
初期状態（ページを開いた直後）では 600pxがはみ出して表示され、横にスクロールできるようになっています。

これを縮小して、960pxを全て画面に収まるようには出来ません。width=device-widthが記述されているからです。device-width（つまり360px）より縮小は出来ません。ここらは下記の参考サイトで詳しく解説されています。

これを解消したい場合、width=device-widthをwidth=960pxのようにページ幅と同じ数値に合わせてみてください。これで恐らく縮小できるようになるはずです。

【参考】
コピペで済ませていませんか？改めて学び直したい「Viewport」のすべて