Chrome模拟器和iphone 5显示错误的媒体查询样式,但是在窗口调整大小时工作

Question

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

我尝试将断点最大宽度移动到高于640px,但它仍然不起作用.我确实写了视口声明.

    <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 name="viewport" content="width=device-width, initial-scale=1">