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

Question

使用安装了iOS 10的iPad,我进入window.outerWidth浏览器控制台并获得了值0.OTOH,window.innerWidth正确生产1024(横向模式).

在iOS 9中,window.outerWidth正确生成1024,这只是iOS 10测试版中的一个错误,还是我错过了这个属性的微妙之处？

Answer 1

这个问题不仅仅存在于 iOS 10 Beta 中，但我怀疑这是 Apple 开发人员需要优先解决的问题，因为 iOS 设备的浏览器窗口两侧并没有真正的外部框架，因此window.innerWidth is the same as window.outerWidth.

To see this working in a different context, you can pop open the inspector in your browser and emulate a smaller device. The inner width will be equal to the page width, while the outer width will be equal to the full width of the open browser.

如果您仍然需要使用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 个像素宽。