Question

我正在尝试加载div并将其绝对定位于移动游戏中 - 想想警报框。

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

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

但是我意识到，视口将与页面上的固定位置不同，当浏览器向下滚动时，元素将显示在偏移位置。我想我可以尝试使用基于window.pageYOffset值的javascript移动位置，但不幸的是，这显示0是否显示了chrome。

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

我尝试过（w / 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驱动程序） - 所以这似乎不起作用。< / p>

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

谢谢！

-simon

Answer 1

这篇文章describes the vewport problem，尤其是使用{{1}获取window.innerWidth/Height和 Retina 的非Retina 维度时的重大悲剧点}

Answer 2

难道你不能只是在你的iPhone上浏览Safari然后把照片带到Photoshop或类似的东西并进行测量吗？记住使用“电源按钮 - 主页按钮”按键拍摄的照片是屏幕上实际尺寸的两倍，因此将高度除以2.

如何获得移动safari chrome的高度？

2 个答案: