1

我已经研究了几天，但我一直无法想出解决我的问题的方法。

现在，对于移动屏幕中断，我决定使用 (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);}

}

有没有人对修复有任何建议，或者我做错了什么？

4

1 回答 1

0

你需要这个...

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
于 2014-11-23T16:45:16.353 回答