纯粹通过css检测iPhone/iPad

Question

我一直在尝试纯粹通过样式表检测 iPhone 或 iPad。我尝试了here提供的解决方案，使用@media手持设备，仅屏幕和（最大设备宽度：480px）{。

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

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

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

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

Answer 4

您可能想尝试这篇 O'Reilly 文章中的解决方案。

重要的部分是这些 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"> 

Answer 5

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

同时，

device-width

、

device-height

和

device-aspect-ratio

的媒体查询已被弃用，因此它们可能无法在未来的浏览器版本中使用。 （来源：MDN）

TLDR：基于浏览器宽度而不是设备进行设计。 这是对该主题的一个很好的介绍。

Answer 6

目标是确定设备是否支持悬停功能。本质上，如果用户无法将鼠标悬停在元素上，则很可能是触摸设备。 😊

对课程使用以下媒体查询：

 @media (hover: none) {
      .class {
        background: #cccccc;
      }
    }

就是这样，您的 .class 将仅在触摸设备上具有灰色背景颜色。

如果您想在支持悬停功能的设备上显示 CSS，您可以执行以下操作：

 @media (hover: hover) { // note the hover value
      .class {
        background: #000000;
      }
    }