如何仅向 iPhone 显示特定的 DIV？

Question

已经阅读了许多类似的帖子， 例如这些，而这实际上正是我正在寻找的，但是答案很老，很苛刻，也没有希望的那么有用。

基本上，在 Javascript 中，我希望浏览器检测 iPhone（并且只是 iPhone）并在单个页面上显示特定的 DIV，以宣传 iPhone 特定的内容。 这篇文章是最有用的，但它基本上与我想要的相反——如果用户在移动设备上，它会隐藏一个特定的 DIV，而不是显示它。

我认为这些行的代码应该是接近的：

<script type="text/javascript"> 
    var mobile = (/iphone(navigator.userAgent.toLowerCase()));  
    if (mobile) { 
    
    [Relevant DIV code goes here]; 
    
    } 
    else 
    { 
        //do nothing
    }
</script>

它适用于默认的“警报”代码，但我需要一些帮助才能让 DIV 进行合作。 谢谢你。

Answer 1

这是一个简单的例子。 您需要掌握如何在文档中选择元素才能成功。 由于我提供的文档只有一个带有 class apple的元素和另一个带有 class android的单个元素。

因此，当我们使用 class 获取文档中的所有元素时（document.querySelectorAll 与 document.querySelector 相对，它只返回第一个匹配元素 - 在本示例中这实际上是一个更好的选择），我知道该元素我担心将是第一个，因此我用 0 索引数组（大小为 1）。

 "use strict"; window.addEventListener('load', onLoaded, false); function onLoaded(evt) { var isIphone = true, isAndroid = false; if (isIphone) document.querySelectorAll('.apple')[0].classList.remove('no-show'); else if (isAndroid) document.querySelectorAll('.android')[0].classList.remove('no-show'); }

 .no-show { display: none; }.android, .apple { border: solid 2px #888; }

 <div class='apple no-show'>iPhone</div> <div class='android no-show'>Android</div>