Question

我一直试图通过样式表来检测iPhone或iPad。我尝试使用@media掌上电脑提供here的解决方案，只使用屏幕和（max-device-width：480px）{。

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

Answer 1

iPhone＆amp; iPod touch：

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

iPhone 4＆amp; 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

您可能想尝试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">

Answer 4

我用这些：

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

许多具有不同屏幕尺寸/比率/分辨率的设备在过去五年中已经问世，包括新型iPhone和iPad。为每个设备定制网站非常困难。

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

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

纯粹用css检测iPhone / iPad

5 个答案: