Q&A
viewport はどのような設定になっていますか？
デベロッパーで見ると htmlとbodyの青い枠が 要素よりも小さい
質問させて頂きます。
chromeのデベロッパーで html の青い枠が画面いっぱいに広がっているように見えませんが
プレビューのサイズが500 x 515 なので html のサイズも500 x515 となっているので問題ないのでしょうか
bodyも同じ表示になります。
初歩的すぎる質問かもしれませんが、どなたかご回答いただけましたら幸いです
基本設定したのは下記のみです
【html 基本設定】
html {
line-height: 1.15; /* 1 /
-webkit-text-size-adjust: 100%; / 2 /
-webkit-tap-highlight-color: transparent; / 3*/
}
【body 基本設定】
body {margin: 0;}
私が気付かない間に 操作中に表示設定を変えた可能性があるとしたら
この三つの丸が縦に並んでいるボタンのどれかに触れたのかもしれません
関係あるでしょうか
試したこと
1,html と body に width:100%; height:100% もしくは auto
2,他のサイトの表示も見てみましたが、青い枠は全体に広がっています
Lhankor_Mhyさん。ご協力くださってありがとうございます
HTMLの head の中に下記を記載しています
<meta name="viewport" content="width=device-width, initial-scale=1">
たぶん、オーバーフローしているように思えます。
ただ、そのビューポート設定で、スクリーンサイズを500pxに指定した場合、500px分しか表示されないように思うのですが、その画面はどうやって表示したのか教えていただけますか？
私は英語が分からず (スペイン語は分かるのですが) 表記が英語の為、さわるのが怖いのでさわっていませんが、お話を伺っていると 知らない間に どこかのボタンをおしてしまったのかもしれません。。。
なのどどうやって表示したのか分からない状態です
設定画面を見て頂いた方が 良いかもしれないので
質問内容を編集して 設定画面の写真を掲示させていただきたいと思います
うーん、ちょっとわからないですね。
ただ、position: absolute を使った場合など、ページより html 要素が小さくなることは、全然普通にあり得ます。
そういうことがあるんですね! 今のところ position: absolute は使っていないのですが、
使う時があったら 注意深く観察してみます!
本当にご親切にありがとうございます
デベロッパーの不具合? 的な感じかもしれませんか?
今のところwebページがきちんとブラウザーに表示されているようなので このまま作業をつづけてみます。
でも同じような現象が起こっている方もいらっしゃるかもなので、もうしばらく別の回答も待ってみようと思いますが、もし何か分かったらよろしくお願いいたします
回答1件
0
目盛りを見るとちょっと小さく領域が表示されているかなと思います。
ディベロッパーツールの画面の広さの数値をいじっていると表示が変になることがたまにあります。
倍率をいじっていてもなるかな。
リロードしてやると正常に表示されたりします。
画像追加 html 1024×3459.88 : Responsive 1141×596
ご提示のモノとは異なりますが、1024pxのはずなのに1141pxを覆っていますよね？
この辺りの表示はレスポンシブの確認をしていると良くバグります。※仕様かもですがっ
投稿2021/03/15 11:32
編集2021/03/15 11:38
退会済みユーザー
総合スコア0
amiya-se さん、ご親切に画像の添付までしていただきまして、ありがとうございます!
素人の私でも目で見ることができて分かりやすいです。
ご説明も丁寧にしていただき、デベロッパー側の表示の問題なのですね! 私の入力に問題があるといけないと思っていたので、安心しました。
確かに倍率などの表示の仕方もイマイチよく分からず、触っているうちにおかしくなったのかもしれません。 htmlとcssを学んでいて思ったのですが、設定などほとんどが英語表記なので 多国語に対応していただけると 素人でもなんとか分かる部分があると思うのですが。。。
そんな中、ホームページやyoutubeなどで解説されている方がたくさんいらっしゃるし、このサイトのように質問ができる場所がある事に驚きました。本当にありがたいです。
あなたの回答
tips
プレビュー
