检测 iPhone 浏览器

Question

是否有脚本可以检测访问者是否使用 iPhone（无论是什么浏览器，可能是 iPhone Safari、iPhone for Opera 等）？

然后将关闭一些我的 JavaScript。

谢谢...

Answer 1

在网上搜索有两种常见的方法可以实现这一点。
我最喜欢的是 PHP，它是如此干净？哇。 :D

在 PHP 中你可以编写

<?php

function isIphone($user_agent=NULL) {
    if(!isset($user_agent)) {
        $user_agent = isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : '';
    }
    return (strpos($user_agent, 'iPhone') !== FALSE);
}

if(isIphone()) {
    header('Location: http://www.yourwebsite.com/phone');
    exit();
}

// ...THE REST OF YOUR CODE HERE

?>

在 javascript 中你可以编写

var agent = navigator.userAgent;
var isIphone = ((agent.indexOf('iPhone') != -1) || (agent.indexOf('iPod') != -1)) ;
if (isIphone) {
    window.location.href = 'http://www.yourwebsite.com/phone';
}

希望有帮助。

PK

Answer 2

传统观点认为 iOS 设备有一个 Safari 用户代理和一个 UIWebView 用户代理。这种假设是不正确的，因为 iOS 应用程序可以并且确实自定义其用户代理。这里的主要罪犯是Facebook。

比较 iOS 设备中的这些用户代理字符串：

# iOS Safari
iPad: Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3
iPhone: Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3

# UIWebView
iPad: Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/98176
iPhone: Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Mobile/8B117

# Facebook UIWebView
iPad: Mozilla/5.0 (iPad; U; CPU iPhone OS 5_1_1 like Mac OS X; en_US) AppleWebKit (KHTML, like Gecko) Mobile [FBAN/FBForIPhone;FBAV/4.1.1;FBBV/4110.0;FBDV/iPad2,1;FBMD/iPad;FBSN/iPhone OS;FBSV/5.1.1;FBSS/1; FBCR/;FBID/tablet;FBLC/en_US;FBSF/1.0]
iPhone: Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; ru_RU) AppleWebKit (KHTML, like Gecko) Mobile [FBAN/FBForIPhone;FBAV/4.1;FBBV/4100.0;FBDV/iPhone3,1;FBMD/iPhone;FBSN/iPhone OS;FBSV/5.1.1;FBSS/2; tablet;FBLC/en_US]

请注意，在 iPad 上，Facebook UIWebView 的用户代理字符串包括“iPhone”。

在 JavaScript 中识别 iPhone 的旧方法：

IS_IPHONE = navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null);

如果您采用这种方法来检测 iPhone，那么如果用户来自 iPad 上的 Facebook，您最终会得到 IS_IPHONE 为 true 的结果。这可能会产生一些奇怪的行为！

在 JavaScript 中识别 iPhone 的正确方法：

IS_IPAD = navigator.userAgent.match(/iPad/i) != null;
IS_IPHONE = (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null);
if (IS_IPAD) {
  IS_IPHONE = false;
}

我们声明 IS_IPHONE 在 iPad 上为 false，以掩盖奇怪的 Facebook UIWebView iPad 用户代理。这是用户代理嗅探如何不可靠的一个例子。自定义用户代理的 iOS 应用程序越多，用户代理嗅探的问题就越多。如果您可以避免用户代理嗅探（提示：CSS 媒体查询），那就这样做。

Answer 3

//Detect special conditions devices
$iPod    = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone  = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad    = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$Android = stripos($_SERVER['HTTP_USER_AGENT'],"Android");
$webOS   = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");

//do something with this information
if( $iPod || $iPhone ){
    //browser reported as an iPhone/iPod touch -- do something here
}else if($iPad){
    //browser reported as an iPad -- do something here
}else if($Android){
    //browser reported as an Android device -- do something here
}else if($webOS){
    //browser reported as a webOS device -- do something here
}

Answer 4

<script language="javascript" type="text/javascript"> 
    //This redirects iPhone users to the iPhone-friendly site
    if ((navigator.userAgent.indexOf('iPhone') != -1) ||
    (navigator.userAgent.indexOf('iPod') != -1)) {
        document.location = "http://i.yoursite.com";
    }

该脚本在 userAgent 中检查 iPhone 或 iPod，然后执行操作。尝试一下。

Answer 5

虽然我喜欢这里的答案，但我认为最好使用以下内容...

http://www.htaccesstools.com/articles/detect-and-redirect-iphone/

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteRule .* http://iphone.example.com/ [R]

或者

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteCond %{REQUEST_URI} !^/my-iPhone-site/
RewriteRule .* /my-iPhone-site/ [R]

这是一个 .htaccess 替代方案，这意味着给您留下更多空间来处理 php :) 希望它有所帮助

Answer 6

迟到了，间接回答这个问题，但我发现它很有用。

不要重定向移动用户，而是考虑使用响应式 CSS 设计为桌面和移动用户提供具有两种不同样式的相同内容。这有助于避免拆分和重复代码。您可以从头开始编写响应式 CSS 代码，或使用 Twitter Bootstrap 等预打包框架。