检测iPhone / iPad纯粹由CSS

我一直试图纯粹通过样式表来检测iPhone或iPad。 我尝试使用@media掌上电脑提供的解决scheme,只有屏幕和(最大设备宽度:480px){。

但是,这似乎并没有工作。 有任何想法吗?

这是我如何处理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"> 

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

您可能想尝试从O'Reilly文章中获得的解决scheme。

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

我使用这些:

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

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

同时,对于device-widthdevice-heightdevice-aspect-ratio媒体查询已被弃用,因此在未来的浏览器版本中可能无法正常工作。 (来源: MDN )

TLDR:基于浏览器宽度的devise,而不是设备。 这里有一个很好的介绍这个话题 。