viewport スマホで見るとサイズがはみ出てバカでかくなる。

横幅サイズ940px のカラムなしのランディングページ
を作りました。

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


で設定すると、iPhoneでもアンドロイドでも、幅が合わずバカでかくなってしまいます。


width=device-width　を　360にしても、940にしても同じです。


initial-scale=0.5 で試してもダメです。　ヘッダー画像などはサイズが940pxです。


助けてください。

質問者からの補足コメント

• CSSで横幅サイズはすべて１００％にしています。

    補足日時：2015/08/23 15:24

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2015/08/24 11:00

＞ただ文字とか画像を整えるのにtableを使っています。

　これも16年前から厳しく戒められてきたはず。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
単に文書内容を整形する目的だけで表を用いるべきでない。 さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで
[Tables in HTML documents (ja)]( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )より

　ウェブページを作成するのでしたら、仕様書くらいは一通り目を通して起きましょう。
＞ランディングページを作りました。
　これも今は作らない。検索エンジンが進歩した現在、ユーザーは直接該当ページに飛んで来ます。すべてのページがランディングページとして機能するように作成するべきです。そのためのHTML4です。
『HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

No.1 回答者： ORUKA1951 回答日時： 2015/08/24 09:57

それだと、<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">の師弟なんか必要ない。

＞CSSで横幅サイズはすべて１００％にしています。
　ならなくてもディスプレイ幅になるはずです。
　そこを間違えているとしか思えません。
　ひょっとしてtable使って配置してませんか？
　mediaqueryなどを使う前に、そもそもリキッドでデザインされていますか？

この回答へのお礼

ORUKA1951様
ありがとうございます。
レイアウトでtableは使っていません。
ただ文字とか画像を整えるのにtableを使っています。
それが原因でしょうか？

お礼日時：2015/08/24 10:13