CSS 媒体查询最近不适用于 iPad

Posted 2023-03-06

【中文标题】CSS 媒体查询最近不适用于 iPad

【英文标题】：CSS Media Query not working for iPad recently

【发布时间】：2013-09-18 16:46:44

【问题描述】：

我一直在为 i Pad 使用一些媒体查询，直到两三天前它们都可以正常工作。但他们只是停止工作。当媒体查询仍在 Firefox 原生响应式设计测试视图 和其他在线网站检查响应式设计时，我的 i Pad 无法识别它们。 我的主动查询是在标题中查看端口

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2"/>

@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape)   //for landscape

@media screen and (min-width: 755px) and (max-width: 1024px) and (orientation : Portrait) //for portrait.

然后也尝试了这些

@media screen and (min-device-width: 768px) and (orientation:portrait)
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)  

---

@media screen and (min-device-width: 1024px) and (orientation:landscape)
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) and (min-width : 768px) and (max-width : 1024px)
and (orientation : landscape)  

//另外我也尝试了其他视口元标记 喜欢

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=2"/>

但没有运气

我不知道我在哪里做错了，但这很重要。请帮助任何形式的帮助将不胜感激

【问题讨论】：

我注意到我的 iPad 在纵向视图中监听元标记中的设备宽度设置存在问题。这对你来说也只发生在某个方向吗？我找不到你的代码有什么问题。

【参考方案1】：

尝试元内容：

<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="viewport" content="width=device-width">

【讨论】：

嗨，谢谢。我尝试了这些标签，但仍然无法正常工作。我现在正在使用所有类型的查询，例如

谢谢，我也试过javascript。但问题是它不能在我拥有的 iPad 上运行。虽然我可以看到站点纵向视图，但不喜欢随着方向的改变而改变，而且它不是全屏的。此外，我尝试过 iPad 模拟器，它在模拟器上运行良好。会不会是我的 I Pad 有问题或其他问题？

对于 iPad 您还可以使用媒体查询来检测 iPad 上的方向（纵向或横向）（来源：Cloud Four）。

【参考方案2】：

我不知道为什么这一直有效。我相信问题是因为您使用的是屏幕，这种媒体类型是为普通电脑屏幕保留的。

这里是媒体类型的列表：

全部：所有媒体设备 听觉：语音/声音合成器 盲文：盲文触觉反馈设备 浮雕：盲文页打印机 handheld：小型/手持设备（如智能手机）[注意：android、ios 和其他智能手机浏览器忽略此规则。] 打印：打印机 投影：投影的演示文稿（如幻灯片） 屏幕：普通电脑屏幕 tty：使用固定间距字符网格的媒体（如电传打字机和 终端） tv：电视类设备

温暖， 水晶米勒