gpt4 book ai didi

iphone - 移动 CSS 不显示

转载 作者:太空宇宙 更新时间:2023-11-03 21:59:10 25 4
gpt4 key购买 nike

我正在尝试自学如何制作网站的移动版本,所以我从一些基础知识开始。

我有以下代码

<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 上这样做时,它仍然显示桌面。

我尝试将最大宽度增加到 640px,这是 iPhone 4S 的分辨率。但我仍然没有运气。我做错了什么?

最佳答案

iOS 设备上的默认视口(viewport)约为 1000 像素。当您打开测试页时,您可能会注意到它看起来不像 320 像素宽 - 它被缩小了很多。

您的页面 head 中需要一个视口(viewport) meta 标记,将视口(viewport)宽度设置为设备的宽度:

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

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

关于iphone - 移动 CSS 不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11770798/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com