dポイントプレゼントキャンペーン実施中!

PC用ページ(テーブル固定幅のデザイン)を作ったのですが、
スマホで見ると、画面に収まっておらず横スクロールをしないと画面上に収まりません。
viewportのmetaタグをhead内に記述しても何も変わりませんでした。

テーブルの幅はwidth="515"
タグは<meta name="viewport" content="width=515px">
<meta name="viewport" content="width=device-width">
それぞれhead内に記述してみましたが、全く反映しません(515pxの数値を変えても無理)

何が間違っているのでしょうか??
どうすれば、スマホで画面に収まるようにできますか?

A 回答 (2件)

テーブルの幅がviewportで指定した幅より広いということでしょうか。



たとえばA4用紙をB5のレターケースに入れる事はできないように、
幅が広い要素を作ったのなら、viewportも相応に大きくしないと無理です。

viewportを515pxにしたいのなら、テーブルを515px以内に収まるように作らないと無理です。

この回答への補足

原因がわかりました。スマホ用のシュミレーターが正確に表示されていなかったようです。
実際に実機を購入しまして、確認したところきちんとViewportの設定が反映されていました。
ご迷惑おかけしてすみません。わかりやすいご回答いただきありがとうございましたm(_ _)m

補足日時:2014/03/08 14:11
    • good
    • 0
この回答へのお礼

ご回答感謝します!!
viewportで指定した幅よりテーブルの幅は狭くても、同じでも何も変わりません。
スマートフォン(iPhone用のブラウザSafari)は、デフォルトでViewportの
横幅が980pxに設定されているとあったので、Viewportの値を980に指定してもみましたが、
それでも結果は変わりません(スマホ画面に収まっていない)
何故なのでしょう??

お礼日時:2014/02/12 19:21

これは初歩的な事ですが、


【引用】____________ここから
見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
 とHTML4.01の勧告(1999年)以来、強く言われてきたことで、tableで見た目のためにtableを使用してはなりません。データの入っているtableでしたら、幅が狭くてもそのまま縮小されてひとつひとつのセルが縦長になって収まるはずです。

<meta name="viewport" content="width=515, initial-scale=1, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">
とかです。
 HTMLでサイズを指定するときはpxは使用しません。

この回答への補足

何故viewportが効かないのか、教えてくださいm(_ _)m

補足日時:2014/02/08 17:03
    • good
    • 0
この回答へのお礼

ご回答ありがとうございますm(_ _)m
テーブルタグよりも、スタイルシートの方が良いという事はわかりましたが、
要するに、テーブルを使うとスマホ画面に収める事は絶対に出来ないということですか?

<meta name="viewport" content="width=515, initial-scale=1, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">記述しても全く反映しません。

お礼日時:2014/02/07 18:23

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!