2017-01-31 7 views
0

は、私は、FirefoxやMac上のChromeで細かい表示するウェブサイトを(templenaylor.com)持っていますが、そのような特定の個ディスプレイ上:Chromeのマージンが不適切ですか?

enter image description here

は、それが表示されるはず方法:

enter image description here

これはcodepenなしでやや漠然とした質問ですが、以前にこの問題に遭遇したことがあるのか​​、まさに私のchromeのバージョンであるのか不思議に思っていました。私はサイトをチェックするために多くのPCを持っていないので、ここで入力を求めています。 ありがとうございました!

+0

それは解像度に基づいて異なります – Keith

+0

^彼が言った。 '#header'に' min-height'(例えば700px)を設定するだけです。 (実際に動作するコンピュータでは、ブラウザウィンドウの高さのサイズを変更すると同じ問題が発生します) – sheng

+0

実際には、あなたのスクリーンショットに基づいて、どちらも同じ解像度ですしかし、私はそれがまだ基本的な高さの問題に由来していることは確かです。 FirefoxとChromeの両方で同じことを実行します。 – sheng

答えて

0

基本的に、異なるPCの長さと幅は異なります。例えば、小さなイマックはあなたのウェブサイトをうまく表示しますが、それより大きなバージョンの27インチのイマックは幅とサイズが違うので、画面上で違う反応をします。

あなたのCSSをチェックする必要があります。その例としては、レスポンシブウェブサイトのパーセンテージを使用することです。しかし、特定の状況では、@メディアルールを使用することをお勧めします。 CSSを@ 1300px幅(@mediaルール)に設定することができます。@ mediaルールに関するこのhttp://www.w3schools.com/cssref/css3_pr_mediaquery.aspを調べてください。私はこれまで私の最後のプロジェクトでこの問題に直面していたので、これはあなたの問題を解決するだろうと確信しています。しかし、それがあなたの問題を解決しない場合。

ウェブキットの拡張機能について詳しく調べることができます。 https://developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions

私はこれらで願っています。あなたの問題を解決します。乾杯。

+0

「別のPC」提供された2つのスクリーンショットが*同じ*マシンでキャプチャされたことは分かりますか? – BoltClock

+0

私はそれが実際にはっきりとはっきりしなかったことに関する質問と同じPCでキャプチャされたことを認識しません。しかし、それは同じPCでキャプチャされている場合。このソリューションは、メディアとWebkitで使用されている可能性があります。 chrome、firefox、IEは特定のCSSスタイルに応じて異なる反応を示します。また、MacはWebページの特定の要素をPCとは異なる方法でレンダリングします。たとえば、メディアの場合はat、Windowsの場合は-moz-windows-theme、@mediaの場合はscreenと(-moz-os-version)を使用して問題を修正できます。 – FaridAvesko

0

このウェブサイトをChromeで見ると(v56.0.2924.76)ノートパソコンで2番目のスクリーンショット(必要なもの)が作成されました。しかし、この問題はヘッダーの背景画像の高さに関係していると私は考えています。あなたは100vhに設定しましたが、100vmaxを試してください。これは、ビューポートの大きな次元の1%に相対的です。ここにCSSがあります:

#header { 
    height: 100vmax; 
}