window.navigator 属性在具有 MDM 限制的 iPad 上返回 null答案

【问题标题】：window.navigator properties return null on iPad with MDM-restrictionswindow.navigator 属性在具有 MDM 限制的 iPad 上返回 null
【发布时间】：2021-02-18 10:48:47
【问题描述】：

我正在尝试检测客户端是否是 iPad，为此我尝试使用 window.navigator.platform 和 window.navigator.maxTouchPoints。

我正在尝试从 Vue 中执行此操作，方法是将其设置为计算属性。

我必须测试的一个设备是 MDM 设备，一台运行最新 iOS 并使用 Safari 作为浏览器的 iPad。

这是我的计算属性：

// ...
computed: {
    isIpad() {
        return navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 0;
    }
}

这是视图：

<div class="feature">
    <div v-if="isIpad" class="feature-desktop">This feature is only available on desktops.</div>
</div>

在我的 MacOS/Firefox 上的 vue-inspector 中，计算的属性是正确的，按预期返回 false。当我尝试通过 Firefox 模拟 iPad 时，它按预期返回 true。但是，如果我在支持 MDM 的 iPad 上使用 Safari 打开页面，此属性会返回 false。

遗憾的是，由于 iPad 被锁定，我无法连接开发人员工具，但我可以手动将 javascript 放在页面上以打印出 navigator.platform 和 navigator.maxTouchPoints 的结果，它们返回预期的 MacIntel平台和5 接触点。

<script type="application/javascript">
    document.getElementById('app').innerHTML = navigator.platform + ' ' + navigator.maxTouchPoints; // Prints MacIntel and 5
</script>

有没有人有这方面的经验？我还没有尝试使用mounted() 设置data-property。

【问题讨论】：

我认为使用计算属性（而不是data 上的属性）不是问题。你试过检查navigator.maxTouchPoints > 2吗？我在其他地方看到了作为解决方案的建议。
我认为这是一个时间问题，如果有的话。可能是 Safari 特有的东西。我添加了一个 mounted 事件处理程序来设置数据属性，这解决了我的问题。

标签： vue.js ipad safari mdm navigator

【解决方案1】：

使用mounted 事件处理程序设置data-property 解决了我的问题。

【讨论】：