移动 CSS 不会显示

Question

我正在尝试自学如何制作网站的移动版本，所以我从一些基本的东西开始。

我有以下代码

<body> 
You are using...
<p class="mobile">
Mobile
</p>

<p class="desktop">
Desktop
</p> 
</body>

使用 CSS

@media screen and (max-width: 480px)  
{    
     p.desktop {
         display:none;
     }
}

    p.mobile {
        display:none;
    }

基本上，我希望根据您使用的设备显示“移动”或“桌面”。当我导航到桌面上的站点时，它显示“桌面”，所以这看起来没问题。但是当我在 iPhone 上这样做时，它仍然显示桌面。

我尝试将最大宽度增加到 640 像素，这是 iPhone 4S 的分辨率。但我仍然没有运气。我究竟做错了什么？

Answer 1

iOS 设备上的默认视口大约为 1000 像素。您可能会注意到，当您拉起测试页时，它看起来不像 320 像素宽 - 它缩小了。

您meta的页面head中需要一个视口标签，将视口宽度设置为设备的宽度：

<meta name="viewport" content="width=device-width">

一旦到位，您会发现您的@media 查询运行良好（尽管您需要p.mobile { display: block; }一点时间来显示“移动”文本）。