检测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-width ， device-height和device-aspect-ratio媒体查询已被弃用，因此在未来的浏览器版本中可能无法正常工作。 （来源： MDN ）
TLDR：基于浏览器宽度的devise，而不是设备。 这里有一个很好的介绍这个话题 。
