如何获得移动 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;
} 

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

我最后的想法是使用window.outerHeight-window.innerHeight计算浏览器的chrome高度，然后根据这个值移动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 developer chrome） - 所以这似乎不起作用。

谁能指出我正确的方向？

谢谢！

-西蒙

Answer 1

这篇文章describes the vewport problem，尤其是当你使用window.ourerWidht/Height获得window.innerWidth/Height和Retina的非Retina尺寸时的悲惨点

Answer 2

您不能在 iPhone 上截屏 Safari，然后将照片导入 Photoshop 或类似软件并进行测量吗？请记住，使用“电源按钮-主页按钮”键拍摄的照片是屏幕上实际尺寸的两倍，因此请将您的身高除以 2。