检测 iPhone iPad 等是不是不工作

Posted 2023-03-07

【中文标题】检测 iPhone iPad 等是不是不工作

【英文标题】：Detect if IPhone IPads, etc not working检测 iPhone iPad 等是否不工作

【发布时间】：2017-07-27 15:29:50

【问题描述】：

问题：我找到了下面的javascript来检测是否是IPhone等等：

<script language=javascript>
        function isApple(userAgent)
          var iPhone = userAgent.match(/iPhone/i) !== null;
          var Apple = userAgent.match(/Apple/i) !== null;
          var Mac = userAgent.match(/Mac/i) !== null;
          var iPod = userAgent.match(/iPod/i) !== null;
          var ios = userAgent.match(/iOS/i) !== null;
          return iPhone || Apple || Mac || iPod || iOS;
        
        // Use like this...
        if(isApple(navigator.userAgent)) 
          document.getElementsByTagName('head')[0].insertAdjacenthtml('beforeend', '<link rel="stylesheet" href="/bootstrap/css/iphone.css">');
        
</script>

但是，它不能正常工作。看来它会影响桌面（非苹果）和具有 css 样式的安卓，应该只影响 iPhone。

不确定是否有更好的方法。任何帮助将不胜感激

*****我可以根据以下脚本检测用户正在使用的设备：

var deviceType = (navigator.userAgent.match(/iPad/i))  == "iPad" ? "iPad" : (navigator.userAgent.match(/iPhone/i))  == "iPhone" ? "iPhone" : (navigator.userAgent.match(/android/i)) == "Android" ? "Android" : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ? "BlackBerry" : "null";
alert(deviceType);

但是，当我执行以下操作时，如果它是 iPhone，css 不适用于 iPhone。图像仍然失真。

if(deviceType == 'iPad' || deviceType == 'iPhone') 
              document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/bootstrap/css/iphone.css">');
        

以下是我正在使用的 CSS：

    @media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 991px) and (min-width: 768px)
    #homepage .carousel .item 
        /*height: auto !important;*/
        margin-top: 115px !important;
    

@media screen and (max-width: 991px) and (min-width: 768px) and (orientation:landscape)
    #homepage .carousel .item 
        /*height: auto !important;*/
        margin-top: 20px;
    

@media (max-width:961px) and (min-width: 768px) and (orientation:landscape)
    #homepage .carousel .carousel-caption  
        top: -20px !important;
    

/* Portrait and Landscape iphone*/
@media only screen 
  and (max-device-width: 480px) 
  and (orientation:portrait)  
    #homepage .carousel .item margin-top: 71px; height: 150px !important;
    #homepage .carousel .item img  max-width: 100%; height: auto; display: block; 


@media only screen 
  and (max-device-width: 480px) 
  and (orientation:landscape)  
    #homepage .carousel .item  height: 250px !important; 
    #homepage .carousel .item img  max-width: 100%; height: auto; display: block; 

【问题讨论】：

language=javascript 应该是 language="javascript" 也不需要指定语言。只需使用

“不确定是否有更好的方法” - 这取决于您在这里尝试解决的实际问题。通常，您会使用媒体查询为具有不同格式的移动设备提供服务，主要是根据设备宽度来确定如何显示内容。我们不知道您是否有正当理由尝试根据用户代理以不同方式对待设备。 （但即使在这种情况下，我通常也宁愿不使用额外的样式表，而是在 html 或 body 元素上设置一个类，以便其他格式可以基于此而有所不同。）

查看这个帖子***.com/questions/11077853/…

@SagarV language=javascript 与language="javascript" 一样有效。然而，它们都没有意义，因为正确的 mime 类型是 application/javascript。但正如你所说，没有必要包括在内。

我将在运行 chrome 的 Windows 10 计算机上添加，navigator.userAgent 包含“Apple”一词，因此这种样式对我来说会失败。完整的字符串是：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

【参考方案1】：

我经常用来检查用户代理是否是 iOS 的一个很好的正则表达式：

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

对于 iOS 设备总是返回 true，对于其他设备总是返回 false。

【讨论】：

正如我在对问题的评论中所说：'我的运行 chrome 的 Windows 10 计算机，navigator.userAgent 包含“Apple”一词'；这个解决方案可以解决问题。也是一个更好的正则表达式测试，可以将其简化为一个测试而不是运行多个测试。

@ZackSunderland：我可以执行以下操作： var deviceType = (navigator.userAgent.match(/iPad/i)) == "iPad" 吗？ "iPad" : (navigator.userAgent.match(/iPhone/i)) == "iPhone" ？ "iPhone" : (navigator.userAgent.match(/Android/i)) == "Android" ？ "Android" : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ？ “黑莓”：“空”； if ((deviceType == "iPhone") || (deviceType == "iPad"))document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', '');

【参考方案2】：

您是否在寻找仅限 JS 的解决方案？否则这也可能很有趣：http://mobiledetect.net/

顺便说一句，userAgent 检查不可靠，例如IE'userAgent 字符串同时包含“iphone”。我的 userAgent（ubuntu 上的铬）看起来像 Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/59.0.3071.109 Chrome/59.0.3071.109 Safari/537.36。使用正则表达式测试，我将使用 Mozilla、Apple、Google 或 Chromium 浏览器……这可能就是您的代码也会影响桌面和 android 客户端的原因。

【讨论】：

@siimne7：是的，只有 JS 的解决方案。你是什​​么意思“同时包含'iphone'”？

见***.com/questions/9038625/detect-if-device-is-ios。观察 MS 的某个人认为将“iphone”插入 IE 的 userAgent 字符串是个好主意...

【参考方案3】：

我完全复制了上面 G.Hunt 的解决方案，但是由于您要求进一步澄清，请参阅下面的代码。如果您觉得这有帮助，请点赞 G.Hunt 的回答。

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) 
    document.getElementsByTagName('head')[0].insertAdja‌​centHTML('beforeend'‌​, 
    '<link rel="stylesheet" href="/Regal-en-us/includes/themes/MuraBootstrap3/assets/boo‌​tstrap/css/iphone.cs‌​s">');

【讨论】：

@Zack Sunderland：那我当时采用的方法行不通？我会尝试你正在做的方法

@ROB 不，您编写的方法行不通。对于一个match() 函数返回一个数组，因此更好的方法是检查返回值是否不为空navigator.userAgent.match(/iPad/) ? 'iPad' : ...，但即使在这种情况下，我提供的代码也完成了同样的事情，只是步骤少得多和更清晰的代码。

@Zack Sunderland：好的。谢谢你的澄清。虽然它检测到它正在使用什么设备，但样式不起作用

@ROB 这可能是很多事情。链接元素是否实际上被添加到头部？链接错了吗？检查控制台以获取更多帮助。

@Zack Sunderland：我如何检查 iPhone 的控制台？在浏览器上，它看起来很好，适用于平板电脑和 iPad，但对于 iPhone，它没有显示任何变化