html - ブラウザごとに異なるウィンドウ/ボディ サイズ

Question

画面上の要素のサイズが、ピクセル単位でハードコーディングされているのではなく、パーセンテージを使用して計算されることを意味する、流動的なレイアウトを実装しています。

私が気づいたことの 1 つは、ウィンドウを最大化した同じ画面で、ブラウザが異なれbodyば開始時のサイズも異なるということです。その結果、divブラウザが異なると、サイズと位置がわずかに異なります。

Chrome、FF、Safari でテストしたところ、最大化時のボディ サイズはそれぞれ 1280 x 702、1279 x 687、1280 x 684 です。主な違いは高さにあるようですが、これは URL バー、タブなどのデザイン/位置の違いによって説明されるのでしょうか?

これは、開発者が対処しなければならないことですか (特に、流動的なレイアウトを使用する場合)? もしそうなら、要素が異なるブラウザで常に正確に同じサイズになるようにするための救済策はありますか? または、そのような不一致の原因となる見逃したものは他にありますか?

Answer 1

流動的なレイアウトを使用するということは、レイアウトがほとんどすべての解像度に適応できる必要があることを意味します。そのため、1280x768 モニターで最大化されたブラウザー間のわずかな違いはほとんど問題になりません。人々はさまざまなサイズのモニター (または電話スクリーン、またはタブレット) を使用しており、ページを最大化して表示するだけではありません。レイアウトは、ユーザーがブラウザのサイズを変更しても、幅に合わせて途切れることなく流れる必要があります。これは難しいため、単純なサイトではガター付きの固定幅ページがより一般的です。

PS Web 開発を行う場合は、少なくとも 1920x1080 解像度のモニターを入手する必要があります。それは、最近多くの人があなたのサイトを見ているものであり、それに対応するモニターがなければ、それがどのように見えるかを見ることができません. さらに、コードを操作するためのより多くの画面スペースが得られます。