元素在桌面和移动设备上的位置不同
元素在桌面和移动设备上的位置不同
提问于 2016-10-12 11:46:16
因此，我将媒体查询设置为将一个元素相对于前一个元素定位为"X“像素，最小宽度为756px (我iphone 6S的分辨率)。在我的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，我有容器开关的背景颜色。基本上，在我的桌面上，我将图像的底部与第一个容器的顶部对齐。当在我的iPhone6s上观看时(我不知道如何在手机上观看小提琴)，图像的底部和容器的顶部相隔100多个像素。我希望这会有一点帮助。另外，如果我的代码出错了，我很抱歉。
回答 1
Stack Overflow用户
发布于 2016-10-12 11:55:48
在head部分添加viewport meta标签，使媒体查询可以在移动端运行。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39990195
复制相关文章
相似问题
腾讯云开发者
