4

我正在尝试加载一个 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。

我最后的想法是使用计算浏览器 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 developer chrome）——所以这似乎不起作用。

谁能指出我正确的方向？

谢谢！

-西蒙

4

2 回答 2

0

本文描述了 vewport 问题，尤其是当您获得非 Retina尺寸window.innerWidth/Height和Retina使用时的巨大悲剧点window.ourerWidht/Height

于 2013-04-05T11:11:35.283 回答
-3

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

于 2011-06-27T22:27:27.567 回答