3

我一直在为 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"/>

但没有运气

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

4

2 回答 2

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">
于 2013-09-13T21:49:52.187 回答
1

我不知道为什么这一直有效。我相信问题是因为您使用的是屏幕，这种媒体类型是为常规计算机屏幕保留的。

以下是媒体类型的列表：

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

温暖，水晶米勒

于 2014-09-11T18:05:53.210 回答