ios - 如何修复媒体屏幕中断问题

Question

我已经研究了几天了，但我还没有找到解决问题的办法。

现在，对于移动屏幕中断，我决定使用 (min-width: 320px) 和 (max-width: 640px)。在桌面浏览器(chrome、firefox、IE8、Safari)上；然而，当我将文件放在服务器上并尝试在我的 iPhone 4s 上打开该网站时，屏幕中断不起作用并且我所有的背景图像都消失了。

这是我的桌面 css(有七个部分，但我将列出两个部分，因为每个部分都是相同的 - 除了背景图片):

#home{width: 100%;
    height: 1080px;
    background: url(../images/landingPage.jpg) no-repeat fixed;
    margin: 0 auto;}

#about{width: 100%;
    height: 1080px;
    background: url(../images/about.jpg) 50% 0 no-repeat fixed;
    margin: 0 auto;}

这是媒体屏幕中断的 css:

@media only screen and (min-width: 320px) and (max-width: 640px){

    #home{background-image: url(../images/landingPageMobile.jpg);}

    #about{background-image: url(../images/aboutMobile.png);}

}

如果我做错了什么，有人对修复有任何建议吗？

Answer 1

你需要这个...

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">