-1
私のメディアクエリは、幅が756px（私のiPhone 6Sの解像度）で、前の要素から相対的に "X"ピクセルの位置にある要素を持つように設定されています。私のWindowsのデスクトップで、私はそれが欲しい場所に要素を配置しました。しかし、私のiPhoneでサイトを開くと（デフォルトのSafariブラウザを使用して）、要素は100ピクセル以上離れています！要素は私のデスクトップ上に表示されているよりも私のiPhoneの上に位置しています。何か案は？デスクトップブラウザでズームを確認したところ、すべて100％に設定されていました。デスクトップとモバイルで要素の位置が異なる
編集：ここに私のコードのフィドルモックアップです。 https://jsfiddle.net/8f6y1pdx/1/
<header>
<div id = "navContainer"><h1>Hello</h1></div>
<div id = "backgroundImage"><img src = "http://cdn.wallpapersafari.com/4/18/laMvrx.jpg" width = "2560" alt = "bg image"></div>
</header>
<body>
<div id = "contentOneContainer">Container one</div>
<div id = "contentTwoContainer">Container two</div>
</body>
とCSS
html, body{
padding: 0;
margin: 0;
}
#navContainer{
position: fixed;
z-index: 0;
width: 100%;
background-color: black;
color: white;
height: 100px;
text-align: center;
}
#backgroundImage{
position: fixed;
z-index: -2;
}
#backgroundImage img{
width: 100%;
max-width: 2560px;
}
#contentOneContainer{
width: 100%;
height: 500px;
background-color: blue;
position: relative;
top: 417px;
z-index: 0;
color: white;
}
#contentTwoContainer{
width: 100%;
height: 250px;
background-color: gray;
position: relative;
top: 417px;
z-index: 0;
color: white;
}
/*----------------------------------*\
Responsive
\*----------------------------------*/
@media (min-width: 757px){
#contentOneContainer{
background-color: red;
}
}
あなたは、画面サイズを調整した場合は、757pxで私は、コンテナスイッチの背景色を持っています。基本的には、私のデスクトップでは、最初のコンテナの上部に画像の一番上を並べています。私のiPhone 6で見たとき（私はモバイルでフィドルを見るときこの作業をする方法を知らない）、画像の下部とコンテナの上部は100プラスピクセル離れている。これが少し助けてくれることを願っていますまた、私のコードが吹っ飛んでもごめんなさい。
コードをフィンドルにします。あなたを助けるのは簡単です。 – ilmk
Googleで検索して検索 –
フィドルプラスコードを追加しました。 – ewrjontan