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

Posted 2023-03-06

技术标签:

【中文标题】CSS媒体查询仅针对iPad和iPad？【英文标题】：CSS media query to target iPad and iPad only? 【发布时间】：2012-01-06 11:23:42 【问题描述】：

您好，我正在使用多种平板设备、iPad、Galaxy Tab、Acer Iconia、LG 3D Pad 等。

iPad - 1024 x 768 LG 平板 - 1280 x 768 Galaxy Tab - 1280 x 800

我只想使用 CSS3 媒体查询来定位 iPad。因为，LG 和 iPad 的设备宽度是相同的 768 像素 - 我无法分离每个设备。

我尝试过以下分离，但似乎不起作用：

@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 */

我不知道 iPad 的 -webkit-device-pixel-ratio 和其他 -webkit* 选项及其值。我不想将 javascript 用于样式，有什么想法吗？

【问题讨论】：

device-aspect-ratio 可以在 iPad 上使用，但正确使用的值是 768/1024 【参考方案1】：

这是给 ipad 的

@media all and (device-width: 768px)

这是给 ipad pro 的

@media all and (device-width: 1024px)

【讨论】：

【参考方案2】：

/*working only in ipad portrait device*/
@media only screen and (width: 768px) and (height: 1024px) and (orientation:portrait) 
  body
    background: red !important;
    

/*working only in ipad landscape device*/
@media all and (width: 1024px) and (height: 768px) and (orientation:landscape)
  body
    background: green !important;
     


In the media query of specific devices, please use '!important' keyword to override the default CSS. Otherwise that does not change your webpage view on that particular devices.

【讨论】：

【参考方案3】：

如今，您可以使用Media Queries Level 4 功能来检查设备是否具有to 'hover' over elements 功能。

@media (hover: hover)  ...

由于 ipad 没有“悬停”状态，您可以有效地瞄准 ipad 等触控设备。

【讨论】：

【参考方案4】：

终于从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: 1024px) and (device-height: 768px) and (orientation:landscape) 
  .ipad-landscape  color: blue;  /* your css rules for ipad landscape */

希望这会有所帮助。

其他参考资料：

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCs-s-ref/Articles/OtherStandardCSS3Features.html

【讨论】：

以防万一您想知道，如果设备旋转，这将切换样式，而无需使用 Javascript。所有 iPad 的分辨率都一样吗？我认为不同版本有 3 种分辨率。而且我想无法预测是否会出现更多的解决方案。过去，当我在做它的时候，没有 iPad Mini。所以，我不知道它报告的屏幕分辨率是多少。但是，这个 CSS 媒体查询适用于视网膜 iPad。因此，最好在实际设备上进行测试以更加确定。横屏时不是device-width: 1024px吗？不，据我所知，这些尺寸信息对于设备是固定的。对于方向，您已经有 orientation 选择器。【参考方案5】：

我回答这个问题有点晚了，但以上都不适合我。

这对我有用

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

【讨论】：

谢谢，但是在横向和纵向模式之间切换时，我觉得很乱。所以我不得不添加and (orientation:portrait) 和and (orientation:landscape) 这样css 就不会发生冲突。所以对于任何不明白我的意思的人来说，总的媒体查询看起来像这样：@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) //style 【参考方案6】：

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

【讨论】：

【参考方案7】：

您需要使用一些脚本通过其用户代理来定位设备。 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

【讨论】：

在服务器上检测有一些好处。一旦在服务器上检测到，我会在响应正文中添加一个类以帮助选择 CSS。这是最好的答案。基于精确的屏幕像素分辨率和方向检测特定的第三方设备不是面向未来的，也不是 CSS 的目的。服务器端用户代理桥从来都不是一个很好的区分解决方案，所以这个应该是最重要的。 @FilipDalüge 这远非最佳答案。只要您使用媒体查询来解决 CSS 间距问题，它是否是面向未来的，或者它是否可以在具有完全相同屏幕尺寸的其他设备上触发都无关紧要。上面的答案针对的是一个 exact 版本的 Mobile Safari，它基本上没用，因为它甚至无法在一代人中处理所有 iPad 设备。当媒体查询可以完成这项工作时，没有人应该这样做。绝对不是最佳答案。【参考方案8】：

同样的问题，也有答案 =)

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) ...

我目前无法测试，所以请测试一下 =)

还发现了一些：

http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

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

【讨论】：

以上是关于CSS媒体查询仅针对iPad和iPad？的主要内容，如果未能解决你的问题，请参考以下文章

iPad 3（或新 iPad）上的 CSS 媒体查询

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

3 个针对 iphone 纵向、横向和 ipad 纵向的媒体查询

Css 媒体查询，目标网页浏览器宽度小于 1024px 和 iPad 纵向

是否可以使用 css 媒体查询在 ipad 上定位 Kindle 应用程序？

css iPad媒体查询