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

问题描述

我正在尝试检测客户端是否是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检查器中，计算出的属性是正确的，按预期返回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>

有人对这种事情有经验吗？我尚未尝试通过data设置mounted()属性。

解决方法

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