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

【问题标题】：CSS Media Query not working for iPad recentlyCSS 媒体查询最近不适用于 iPad
【发布时间】：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 在纵向视图中监听元标记中的设备宽度设置存在问题。这对你来说也只发生在某个方向吗？我找不到你的代码有什么问题。

标签： css html ipad responsive-design media-queries

【解决方案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：电视类设备

温暖，水晶米勒

【讨论】：