Q&A
###前提・実現したいこと
デベロッパーツールで、スマホサイズのブラウザの表示テストをしたとき、
指定した領域より外にあたる領域が表示されてしまう。
###発生している問題・エラーメッセージ
HTML・CSSの問題なのか、デベロッパーツールの使い方の問題なのか、
切り分けができず、質問させていただきます。
htmlタグのstyleを「width: 400px」と設定しました。
しかし、デベロッパーツールで確認してみると、
htmlタグの横幅は正しく設定されているが、それより右の領域（余白）も表示されてしまいます。
※横幅を指定せずにhtmlを開くと横幅が980px固定で、
横幅を指定しても980px分の横幅が表示されてしまう状態です。
下記画面は、その状態のデベロッパーツールの画面です。
なにか初歩的な理解不足／思い違いをしているのではないか、と思い、
こちらに投稿させていただきました。
ご助言いただければ幸いです。よろしくお願いいたします。
###該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <style> 5 html { 6 width: 400px; 7 } 8 </style> 9</head> 10<body> 11 test. 12</body> 13</html>
###試したこと
- リセットCSSなどを適用してみましたが、効果はありませんでした。
- デベロッパーツールについて、サイズを変更したあとにページを更新しましたが、これも効果なしです。
回答1件
0
ベストアンサー
HTML
1<meta name="viewport" content="width=device-width">
とりあえずこれ入れましょう。
何も入っていないと多くのスマホは横幅980pxと認識して表示しようとします。
それから、html要素はルート要素でありそれより外側には何も存在しないため、
幅の指定をしても意味ないですよ。html要素の幅でブラウザのウィンドウサイズを指定できるわけではないので。
追記：
上記のviewport指定を入れて、html要素からwidthの指定を無くしてください。
そうすれば右側の変な余白は消えます。
投稿2016/10/17 16:42
編集2016/10/17 16:44
総合スコア3763
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/17 16:51