Question

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

中的视口

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"/>

但没有运气

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

Answer 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">

Answer 2

我不知道为什么会这样。我认为问题是因为您使用的是屏幕，这种媒体类型是为常规计算机屏幕保留的。

以下是媒体类型列表：

all：所有媒体设备
听觉：语音/声音合成器
盲文：盲文触觉反馈设备
浮雕：页面盲文打印机
掌上电脑：小型/手持设备（如智能手机）[注：Android，iOS和＆amp;其他智能手机浏览器会忽略此规则。]
print：Printers
投影：预计演示文稿（如幻灯片）
屏幕：常规电脑屏幕
tty：使用固定音高字符网格的媒体（如teletypes＆amp; amp; 端子）
tv：电视类设备

温暖，水晶米勒

CSS Media Query最近不适用于iPad

2 个答案: