PC用ページ(テーブル固定幅のデザイン)を作ったのですが、
スマホで見ると、画面に収まっておらず横スクロールをしないと画面上に収まりません。
viewportのmetaタグをhead内に記述しても何も変わりませんでした。
テーブルの幅はwidth="515"
タグは<meta name="viewport" content="width=515px">
<meta name="viewport" content="width=device-width">
それぞれhead内に記述してみましたが、全く反映しません(515pxの数値を変えても無理)
何が間違っているのでしょうか??
どうすれば、スマホで画面に収まるようにできますか?
No.2ベストアンサー
- 回答日時:
テーブルの幅がviewportで指定した幅より広いということでしょうか。
たとえばA4用紙をB5のレターケースに入れる事はできないように、
幅が広い要素を作ったのなら、viewportも相応に大きくしないと無理です。
viewportを515pxにしたいのなら、テーブルを515px以内に収まるように作らないと無理です。
この回答への補足
原因がわかりました。スマホ用のシュミレーターが正確に表示されていなかったようです。
実際に実機を購入しまして、確認したところきちんとViewportの設定が反映されていました。
ご迷惑おかけしてすみません。わかりやすいご回答いただきありがとうございましたm(_ _)m
ご回答感謝します!!
viewportで指定した幅よりテーブルの幅は狭くても、同じでも何も変わりません。
スマートフォン(iPhone用のブラウザSafari)は、デフォルトでViewportの
横幅が980pxに設定されているとあったので、Viewportの値を980に指定してもみましたが、
それでも結果は変わりません(スマホ画面に収まっていない)
何故なのでしょう??
No.1
- 回答日時:
これは初歩的な事ですが、
【引用】____________ここから
見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[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は使用しません。
ご回答ありがとうございますm(_ _)m
テーブルタグよりも、スタイルシートの方が良いという事はわかりましたが、
要するに、テーブルを使うとスマホ画面に収める事は絶対に出来ないということですか?
<meta name="viewport" content="width=515, initial-scale=1, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">記述しても全く反映しません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- PHP PHPのエラーの解消法について教えて下さい。 1 2023/02/06 10:48
- PHP PHPでCookieを使った訪問回数について 1 2023/05/28 14:10
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlでテーブル内にテキストボ...
-
iframeのスクロールバー:縦だ...
-
Dreamweaverのテーブル内テキス...
-
<H1>を使わずに<H2>以下を使用...
-
(再度)行間を詰める方法
-
TD、THタグ内の水平罫線(...
-
CSSのtransform: translate(-50...
-
エクセルでサイズに合ったもの...
-
エクセルでサイズ指定でPOP...
-
Excel で等間隔で縦線を引きた...
-
HTMLフォームのSELECTの幅を一...
-
『入力文字列 + .html』 に...
-
Microsoft1Officeの互換ソフト...
-
PDFへてのテキストボックスにて...
-
table内で画像と文字をセンター...
-
テーブルで3セル作った行の下に...
-
Excelで可視部分だけをWeb形式...
-
エクセル 画面表示拡大率によ...
-
マクロについて教えてください、、
-
Excelの列の幅(ピクセル)につい...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlでテーブル内にテキストボ...
-
テーブル内の一部のみ線を変更...
-
TD、THタグ内の水平罫線(...
-
Dreamweaverのテーブル内テキス...
-
実行結果をデジタル時計みたい...
-
【ホームページビルダー】表の...
-
iframeのスクロールバー:縦だ...
-
DREAMWEAVERでテーブルに枠線
-
colspanで余計な余白
-
markdownでテーブルの罫線は、...
-
かっこいいウェブを作るテク
-
gooブログに表を挿入できないで...
-
サイト全体を中央に表示したい...
-
<table>の<thead>を固定したい。
-
SEO対策 <Body>タグ直下のテキ...
-
<H1>を使わずに<H2>以下を使用...
-
テーブル固定幅のサイトをスマ...
-
Iフレームを置いているページの...
-
テーブルをテーブルで囲う意味...
-
ホームページビルダーで表と表...
おすすめ情報