横画面でのviewportの指定方法

Question

直接は関係ないのですがWordpressでサイトを制作しています。

ヘッダに

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

を指定して、スマホ用サイトを横480pxで作成しています。
レスポンシブとかではなく、PC版は他に用意しているのでスマホでのみの表示を前提としています。

具体的にはBODYにWindthを480pxで指定して以降をはみ出ないように作成しています。

PCでの見た目は（当然ですが）全く問題ありません。
ただし、スマホで実際に見たときに縦はちゃんと表示されますが、横にすると右側に余白が出来てしまいます。
（横にすると480を超えるのでそのせいだろうとは想像が付くのですが・・）

width=480だけだとAndroidは良いのですが、iPhoneではみ出て表示されてしまうので、表記の指定にしてあります。

個人的にはViewpoertでWidthを480にしてあれば画面幅が超えてれば拡大し、少なければ（iPhone等320幅の機種等は）縮小表示されると思っていましたが違っていたようです。

横にした場合はそのまま拡大表示してくれればそれで良いのですが、どのような方法がありますでしょうか？

ご指導頂けたらと思います。

Comments

[kei344]

まだ質問が「受付中」になっていますが、いったんご自身の回答で「解決済」にされてはいかがでしょうか。

[landy77]

ごめんなさい、自己解決にするって押したつもりになってました。

[kei344]

いえ、対応ありがとうございます。

Answer 1

今回解決できなかったので、画面幅に対する比率ですべて書き直しました。
大変でしたが・・・汗

ありがとうございました。

Answer 2

もう解決されているかもしれませんし、未テストで申し訳ないのですが、maximum-scale=1.0 が有るから拡大できないのではないでしょうか。

<meta name="viewport" content="target-densitydpi=device-dpi, width=480, initial-scale=1.0 , user-scalable=yes">

Comments

[landy77]

ありがとうございます！
今回は自分で解決できなかったので比率ですべてを書き直しました。
次回の際に試してみます！