iphone - 如何获取 mobile safari chrome 的高度？

Question

我正在尝试加载一个 div 并将其绝对定位在移动 safari 中 - 想想类似于警报框的东西。

我尝试使用绝对定位的 div，顶部设置为 50%，边距为高度/宽度的一半:

#overlay-message {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 20px;
  margin: -67px 0 0 -110px;
  width: 220px;
  height: 125px;
} 

但正如我意识到的，视口(viewport)将与页面上的固定位置不同，并且当浏览器向下滚动时，元素会显示在偏移位置。我想我可以尝试使用基于 window.pageYOffset 值的 javascript 移动位置，但不幸的是，无论是否显示镶边，这都显示 0。

我最后的想法是使用window.outerHeight-window.innerHeight计算浏览器镶边高度，然后根据该值移动div，但不幸的是这不起作用。

我尝试过(使用jquery):

$(window).load(function() {
    chrome_height = window.outerHeight - window.innerHeight;
    alert('chrome height is ' + chrome_height + ' outerheight: ' + window.outerHeight + ', innerheight: ' + window.innerHeight); 
});

但我发现 window.innerHeight 和 window.outerHeight 都是相同的 - 306(我已经打开了 safari 开发者 chrome) -所以这似乎不起作用。

有人能指出我正确的方向吗？

谢谢!

-西蒙

Answer 1

这篇文章describes the vewport problem ，尤其是当您使用 window.ourerWidt/获得 window.innerWidth/Height 和 Retina 的非 Retina 尺寸时，尤其是悲惨的时刻高度