小编use*_*346的帖子

当我在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; …