CSS媒体查询仅针对iPad和iPad？

嗨，我正在使用多种平板设备，iPad，Galaxy Tab，Acer Iconia，LG 3D Pad等。CSS媒体查询仅针对iPad和iPad？

的iPad - 1024×768
LG垫 - 1280 X 768
的Galaxy Tab - 1280 x 800的

我想要的目标仅限iPad使用CSS3媒体查询。由于LG和iPad的设备宽度相同768px - 我无法分离每个设备。

我曾尝试以下分离，但似乎并没有奏效：

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */ 
@media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */ 
@media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad or LG */

我不知道-webkit-设备的像素比等-webkit *选项和它们的值iPad的目标。我不想为样式使用JavaScript，有什么想法？

来源

2011-11-25 Hossain Khan

设备纵横比iPad上的工作，但要使用正确的值是1024分之768 –

108

终于找到从溶液：Detect different device platforms using CSS

<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" /> 
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />

为了减少HTTP调用，这也里面你可以使用现有的通用CSS文件：

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { 
    .ipad-portrait { color: red; } /* your css rules for ipad portrait */ 
} 
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) { 
    .ipad-landscape { color: blue; } /* your css rules for ipad landscape */ 
}

希望这会有所帮助。

其他参考资料：

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html

来源

2012-02-29 18:25:17

为了防万一你想知道，这将切换风格，如果设备旋转，而不必诉诸使用Javascript。 –

所有的iPad都具有相同的分辨率？我以为有不同版本的3个决议。我想不可能预测是否会有更多的解决方案出来。 – Dan

回到过去，当我开始工作时，没有iPad Mini。所以，我不知道它报告的屏幕分辨率是多少。但是，这个CSS媒体查询适用于视网膜iPad。因此，最好在实际设备上进行测试，以便更加确定。 –

嘛相当同样的问题，也有一个答案=）

http://css-tricks.com/forums/discussion/12708/target-ipad-ipad-only./p1

@media only screen and (device-width: 768px) ... 
@media only screen and (max-device-width: 1024px) ...

我无法测试它目前所以请测试它=）

或者你用一些javascript检查导航器并用javascript生成/添加一个css文件

来源

2011-11-25 16:12:37

你需要通过它的用户代理使用一些脚本来定位设备。为iPad用户代理是：

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

来源

2011-11-25 17:43:06

检测服务器上有一定的好处。一旦在服务器上检测到，我会在响应正文中添加一个类，以帮助进行CSS选择。 – Oren

这是最好的答案。基于精确的屏幕像素分辨率和方向检测特定的第三方设备不是未来发展趋势，也不是CSS的目的。服务器端用户代理网桥从来就不是一个很好的解决方案，所以这个应该是最重要的。 – daluege

@FilipDalüge这远不是最好的答案。只要您使用媒体查询修复CSS间距问题，无论它是否具有未来的可靠性，或者在具有完全相同屏幕尺寸的其他设备上触发，都无关紧要。上面的答案针对的是移动Safari的*精确*版本，这基本上是无用的，因为它甚至不会处理所有的iPad设备。 –

<html> 
<head> 
    <title>orientation and device detection in css3</title> 

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" /> 
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" /> 
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" /> 
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" /> 
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" /> 
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" /> 
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" /> 

</head> 
<body> 
    <div id="iphonelandscape">iphone landscape</div> 
    <div id="iphoneportrait">iphone portrait</div> 
    <div id="ipadlandscape">ipad landscape</div> 
    <div id="ipadportrait">ipad portrait</div> 
    <div id="htcdesirelandscape">htc desire landscape</div> 
    <div id="htcdesireportrait">htc desire portrait</div> 
    <div id="desktop">desktop</div> 
    <script type="text/javascript"> 
     function res() { document.write(screen.width + ', ' + screen.height); } 
     res(); 
    </script> 
</body> 
</html>

来源

2014-12-18 09:31:19

我有点来不及回答，但没有以上为我工作。

这是为我工作

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
    //your styles here 
    }

来源

2015-06-11 09:13:49 Baig

谢谢你，但是当在横向模式和纵向模式之间切换时，它对我来说很麻烦。所以我不得不添加'和（orientation：portrait）'和'和（orientation：landscape）'，这样css就不会发生冲突。因此，对于任何不明白我的意思的人来说，整个媒体查询看起来像是这样的肖像： '@media all and（device-width：768px）and（device-height：1024px）and（orientation：portrait） { //风格 }' – Coco

CSS媒体查询仅针对iPad和iPad？

回答

相关问题