Chrome模拟器和iPhone5显示错误的媒体查询样式，但是可以调整窗口大小

Question

当我在chrome中调整窗口大小时，它看起来就像我想要的那样，并且在正确的宽度上折断。但是，当我在iphone (或任何手机)上模拟屏幕或在iphone上查看时，它会显示错误断点的样式，并显示额外的背景空间。我怀疑这是因为手机的devicePixelRatio；iphone是320px，但由于它的像素比例是2，所以它以640px的宽度显示320px的断点。

我试着将断点max-width调到高于640px，但仍然不起作用。我确实写了viewport声明。

    <meta name=”viewport” content=”width=device-width, initial-scale=1">

我的div包装器宽度设置为屏幕的百分比，而不是像素。此外，我还尝试将背景图像的背景大小设置为覆盖，但没有任何运气。

这是它在iphone上的样子：http://i28.photobucket.com/albums/c221/irlinroman/iphone-640_zpsd656a8ff.png

这是桌面浏览器上调整为640px宽度的窗口：http://i28.photobucket.com/albums/c221/irlinroman/window-resize-640_zps1728eb01.png

下面是我的媒体查询css代码：

    @media screen and (max-width: 960px), screen and (max-device-width: 960px) {
    #links {
    float: none;
    margin-left: 40px;
    margin-top: 10px;
}
#content-2 p.bio {
    float: none;
    margin-bottom: 60px;
    font-size: 0.875em; /*should be 14px, 14 / 16 */
    line-height: 24px;
}
#background-2 {
    height: 420px;
}
#welcome-message, #welcome-message-bg {
    width: 450px;
    height: 280px;
    padding: 40px 20px;
    left: 50%;
    margin-left: -250px;
}
#welcome-message p.welcome {
    font-size: 2em;
}
#welcome-message p.about {
    font-size: 1.5em;
    width: 380px;
    line-height: 40px;
}
#footer .copyright {
    margin-right: 20px;

}

nav ul#regular-nav {
    visibility: hidden;
}

nav ul#responsive-nav {
    visibility: visible;
}

nav #responsive-li-items {
    visibility: hidden;
}
    }

    @media screen and (max-width: 560px), screen and (max-device-width: 560px) {
#welcome-message, #welcome-message-bg {
    width: 240px;
    height: 240px;
    padding: 20px 10px;
    left: 50%;
    margin-left: -130px;
}

#welcome-message p.welcome {
    font-size: 1.3em;
}
#welcome-message p.about {
    font-size: 1em;
    width: 200px;
    line-height: 30px;
}

header {
    height: 140px;
}

nav ul#responsive-nav {
    top: 50px;
    left: 50%;
    margin-left: -100px;
}

#background-image {
height: 470px;
}

#irlin-design-logo {
/*margin-left: 20px;*/
float: none;
display: block;
margin-left: auto;
margin-right: auto; 
}

#content-2 p.bio {
    width: 240px;
    margin-left: 10px;
    display: inline-block;
    margin-top: 0px;
    /*margin-bottom: 0px;*/

}

#content-2 h1 {
    margin-left: 10px;
    display: inline-block;
    margin-top: 0px;
    /*margin-bottom: 0px;*/

}

#about-me-title {
    text-align: center;
}

#bio-div {
    text-align: center;
}

#background-2 {
    height: 480px;
}


#links {
    float: none;
    margin-left: 10px;

}

#links p.side-links {   
    width: 230px;
    margin: 0 auto;
}

#footer-nav-links {
    margin: 0px;
}

#footer-nav-links a  {
    margin-right: 20px;
}
}

提前感谢所有的建议。

Answer 1

您的引号有问题。这个meta帮助我解决了类似的问题。

 <meta name="viewport" content="width=device-width, initial-scale=1"> 

Answer 2

我建议重写你的媒体查询，我从来没有见过像你这样用逗号在媒体查询中定义一个范围：

@media screen and (max-width: 960px), screen and (max-device-width: 960px) {}

相反，我会这样做：

@media screen and (max-width: 960px) and (min-width: 600px) {}

为了更好地解释一下，这个媒体查询代码会影响600px到900px之间的视区，并且应该被任何理解媒体查询的浏览器读取。

Answer 3

我想通了。尽管我的meta viewport标签是正确写入的，但复制别人的并粘贴它，而不是我的，解决了这个问题。