javascript - window.outerWidth 在 iOS 10 beta 上的 Safari 中为 0

Question

我使用安装了 iOS 10 的 iPad，在浏览器控制台中输入 window.outerWidth 并得到值 0。 OTOH，window.innerWidth 正确生成了 1024(横向模式)。

在 iOS 9 中，window.outerWidth 正确地生成了 1024，所以这只是 iOS 10 beta 中的一个错误，还是这个属性有一个微妙的地方，我'我不见了？

Answer 1

问题不仅仅出在 iOS 10 Beta 上，但我怀疑 Apple Devs 是否应该优先解决这个问题，因为 iOS 设备的浏览器窗口两侧并没有真正的外部框架，所以 window .innerWidth 与 window.outerWidth 相同。

要查看此功能在不同上下文中的工作情况，您可以在浏览器中弹出检查器并模拟较小的设备。内部宽度将等于页面宽度，而外部宽度将等于打开的浏览器的整个宽度。

如果您仍然需要使用 outerWidth，您可以做的替代方法是使用以下方法检查屏幕宽度:

let mq = window.matchMedia( "(min-width: 1025px)");

如果您在桌面上，

mq.matches 将评估为 true，然后您可以将 outerWidth 用于桌面和 innerWidth 用于移动设备。或者你可以像这样为你做一个替代函数:

let screenWidth = () => {
  const mq = window.matchMedia( "(min-width: 1025px)" );

  if (mq.matches) {
    return window.outerWidth;
  } else {
    return window.innerWidth;
  }
}

请注意，1025px 在横向方向上比 iPad Air 2 多 1 个像素。