纯粹通过 css 检测 iPhone/iPad
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3839809/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect iPhone/iPad purely by css
提问by FLX
I've been trying to detect an iPhone or iPad purely by stylesheet. I tried the solution provided hereby using @media handheld, only screen and (max-device-width: 480px) {.
我一直在尝试纯粹通过样式表检测 iPhone 或 iPad。我通过使用@media 手持设备尝试了此处提供的解决方案，只有屏幕和 (max-device-width: 480px) {。
However, this doesnt seem to work. Any ideas?
但是，这似乎不起作用。有任何想法吗？
采纳答案by Bart
This is how I handle iPhone (and similar) devices [not iPad]:
这就是我处理 iPhone（和类似）设备 [不是 iPad] 的方式：
In my CSS file:
在我的 CSS 文件中：
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
/* CSS overrides for mobile here */
}
In the head of my HTML document:
在我的 HTML 文档的头部：
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
回答by Olivier Payen
iPhone & iPod touch:
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:
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:
iPad：
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />
回答by DarkDust
You might want to try the solution from this O'Reilly article.
您可能想尝试这篇 O'Reilly 文章中的解决方案。
The important part are these CSS media queries:
重要的部分是这些 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">
回答by zSprawl
I use these:
我使用这些：
/* 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/
http://zsprawl.com/iOS/2012/03/css-for-iphone-ipad-and-retina-displays/
回答by jkdev
Many devices with different screen sizes/ratios/resolutions have come out even in the last five years, including new types of iPhones and iPads. It would be very difficult to customize a website for each device.
甚至在过去五年中，许多具有不同屏幕尺寸/比例/分辨率的设备问世，包括新型 iPhone 和 iPad。为每个设备定制一个网站是非常困难的。
Meanwhile, media queries for device-width, device-height, and device-aspect-ratiohave been deprecated, so they may not work in future browser versions. (Source: MDN)
同时，针对device-width、device-height和 的媒体查询device-aspect-ratio已被弃用，因此它们可能无法在未来的浏览器版本中使用。（来源：MDN）
TLDR: Design based on browser widths, not devices. Here's a good introduction to this topic.
TLDR：基于浏览器宽度而非设备进行设计。这是对这个主题的一个很好的介绍。
