Question

我已经研究了几天，但我无法找到解决问题的方法。

现在，对于移动屏幕休息，我决定使用（最小宽度：320px）和（最大宽度：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">

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

1 个答案: