纯粹通过 css 检测 iPhone/iPad答案

【问题标题】：Detect iPhone/iPad purely by css纯粹通过 css 检测 iPhone/iPad
【发布时间】：2011-04-19 21:10:34
【问题描述】：

我一直在尝试纯粹通过样式表来检测 iPhone 或 iPad。我尝试了here 提供的解决方案，方法是使用@media 手持设备，仅屏幕和 (max-device-width: 480px) {.

但是，这似乎不起作用。有什么想法吗？

【问题讨论】：

相关新问题：CSS media query to target only iOS devices

【解决方案1】：

iPhone 和 iPod touch：

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />

iPhone 4 和 iPod touch 4G：

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

iPad：

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

【讨论】：

iPad 检测存在问题：准备好通常具有 1024x768 和 1024x600 屏幕的上网本也会受到此 CSS 的影响。
Never detect specific devices。每个月都会推出新设备，而且这些数字都会发生变化。

【解决方案2】：

这就是我处理 iPhone（和类似）设备 [不是 iPad] 的方式：

在我的 CSS 文件中：

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
   /* CSS overrides for mobile here */
}

在我的 HTML 文档的头部：

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

【讨论】：

是否有非媒体查询方式来做到这一点？由于 iPad Safari 有这个 bug 功能，它会将大背景图片的大小重新调整为 50%，并且这个 bug 功能在其他小像素浏览器上不存在。所以一个人需要像 iPad 的 IE 条件这样的东西吗？所以我只能定位 iPad/iPhone safari？
不要使用这个，never set user-scalable=no
我在这里必须同意 bfred.it。 user-scaleable=no 不是一个好习惯。
我不同意用户可扩展的“从不”部分。如果您正在构建一个类似本机的响应式 Web 应用程序，那么让它用户可扩展只会导致问题。如果你的设计正确，用户应该永远不需要放大/缩小。
@Vexter 你是对的，这是这个属性的一个很好的用例。但这在原始问答的上下文中显然是不正确的。

【解决方案3】：

我用这些：

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
} 

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
}

/* iPad Landscape */
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
}

http://zsprawl.com/iOS/2012/03/css-for-iphone-ipad-and-retina-displays/

【讨论】：

为 iPad 添加了“and (max-device-width: 1024px)”条件。
如果您的 Android 设备宽度为 460 像素会怎样？

【解决方案4】：

您可能想尝试this O'Reilly article 的解决方案。

重要的部分是这些 CSS 媒体查询：

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> 
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

【讨论】：

虽然理论上这可以回答这个问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。
@Bill the Lizard：感谢您指出这一点，已更新答案。

【解决方案5】：

即使在过去五年中，也出现了许多具有不同屏幕尺寸/比例/分辨率的设备，包括新型 iPhone 和 iPad。为每台设备定制一个网站是非常困难的。

同时，device-width、device-height 和 device-aspect-ratio 的媒体查询已被弃用，因此它们可能无法在未来的浏览器版本中使用。（来源：MDN）

TLDR：基于浏览器宽度而非设备的设计。 Here's a good introduction to this topic.

【讨论】：

需要特定于设备的查询才能解决特定于设备的错误。
如果页面在 iPhone 上显示，我想使用特定的图形（Mail.app 图标）。