在 Mobile Web 中检测 iPhone 5 或其他设备答案

【问题标题】：Detecting iPhone 5 or other in Mobile Web在 Mobile Web 中检测 iPhone 5 或其他设备
【发布时间】：2012-11-27 07:00:15
【问题描述】：

我正在编写一个也可以在手机上浏览的网络应用程序（xhtml、css、js）。我想检测设备是不是iphone 5！

你知道它的 javascript 控制器吗？

【问题讨论】：

【解决方案1】：

您可以使用 CSS3 媒体查询来检测 iPhone 5：

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone 5 or iPod Touch 5th generation */
}

【讨论】：

酷，当 iPhone 6 或其他设备推出具有相同功能的时候？
@RobG - 这似乎是目前实现它的唯一方法。
@Derek AFAIC，我认为目前还没有其他方法可以检测到 iphone 5。
@Derek——这是一个有缺陷的策略，除非 OP 这样做是为了进行一些分析练习，比如访问者使用的设备，而已知错误并没有什么大不了的。请注意，Web User Agents Database 上列出了超过 375,000 种浏览器用户代理类型（哦，还有 17,000 种移动浏览器）。
这是错误的，因为它也适用于任何其他具有 568 像素高密度显示的设备（例如 Android）。最好检查我的答案。

【解决方案2】：

我知道这一点：

  if('devicePixelRatio' in window && window.devicePixelRatio == 2 ){
     // retina
  }

AND（如果需要在服务器上检测）

【讨论】：

【解决方案3】：

您需要检查用户是否在 iOS 设备上并且有视网膜显示屏和屏幕是否正好是 548 像素高。

仅检查retina+displayHeight 是不够的，因为您可能会意外地针对在同样具有高密度显示屏和屏幕高度为548px 的设备上运行的其他操作系统（例如Android）。

现在您可以在启动时将标志应用到您的 dom 树（在 <head></head> 中）：

<script>if (isIphone5()) $("html").addClass("isIphone5");</script>

如果您需要通过 css 定位 iPhone5，您现在可以应用这样的样式，例如：

<style>.isIphone5 .someClass{color:red}</style>

【讨论】：