如何获取 mobile safari chrome 的高度？
我正在尝试加载一个 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 移动位置，但不幸的是，无论是否显示镶边，这都显示 0。
我最后的想法是使用 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 开发者 chrome 打开） - 所以这似乎不起作用。
谁能指出我在这方面的正确方向？
谢谢！
-西蒙
I'm trying to load a div and position it absolutely in mobile safari - think something like the alert box.
I tried to use an absolutely positioned div with top set to 50% with a margin half the height/width:
#overlay-message {
position: fixed;
top: 50%;
left: 50%;
padding: 20px;
margin: -67px 0 0 -110px;
width: 220px;
height: 125px;
}
but as I realized, the viewport is going to be different than the fixed position on the page, and the element is displayed in an offset position when the browser is scrolled down. I thought I could try to move the position using javascript based on the window.pageYOffset value, but unfortunately this shows 0 whether the chrome is shown or not.
My last thought was to calculate the browser chrome height using window.outerHeight-window.innerHeight and then move the div based on this value, but unfortunately this is not working.
I've tried (w/ jquery):
$(window).load(function() {
chrome_height = window.outerHeight - window.innerHeight;
alert('chrome height is ' + chrome_height + ' outerheight: ' + window.outerHeight + ', innerheight: ' + window.innerHeight);
});
But what I'm finding is that window.innerHeight and window.outerHeight are both the same - 306 (I've got the safari developer chrome on) - so this doesn't appear to work.
Can anyone point me in the right direction on this?
thanks!
-simon
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这篇文章描述了 vewport 问题，尤其是当你使用
window.ourerWidHT/Height获取window.innerWidth/Height和 Retina 的非 Retina 尺寸This article describes the vewport problem, especially the grand tragic point when you get non-Retina dimensions for
window.innerWidth/Heightand Retina usingwindow.ourerWidht/Height难道你不能直接在 iPhone 上截取 Safari 的屏幕，然后将照片导入 Photoshop 或类似软件中进行测量吗？请记住，按“电源按钮-主页按钮”按键拍摄的照片是屏幕上实际尺寸的两倍，因此请将您的身高除以 2。
Can't you just screengrab Safari on your iPhone then bring the photo into Photoshop or similar and measure it? Remember photos captured with the "power button-home button" key press are twice the actual size on screen so divide your height by 2.