javascript 隐藏 100% 高度的 iPhone 地址栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5206811/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
hide iPhone address bar with 100% height
提问by technopeasant
Many posts on this, but not quite for my situation. My page has flexible dimensions set to 100% width and 100% height, so the typical on-load scroll function isn't working. Any thoughts or other solutions?
关于这个的帖子很多，但不太适合我的情况。我的页面的灵活尺寸设置为 100% 宽度和 100% 高度，因此典型的加载滚动功能不起作用。任何想法或其他解决方案？
Thanks!
谢谢！
CSS:
CSS：
* {
margin:0;
padding:0;
}
html, body {
width:100%;
height:100%;
min-width:960px;
overflow:hidden;
}
Javascript:
Javascript：
/mobile/i.test(navigator.userAgent) && !pageYOffset && !location.hash && setTimeout(function () {
window.scrollTo(0, 1);
}, 1000);?
回答by Daniel Pietzsch
This solution from Nate Smith helped me: How to Hide the Address Bar in a Full Screen Iphone or Android Web App.
Nate Smith 的这个解决方案帮助了我：How to Hide the Address Bar in a Full Screen Iphone or Android Web App。
Here's the essential bit:
这是必不可少的一点：
var page = document.getElementById('page'),
ua = navigator.userAgent,
iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod');
var setupScroll = window.onload = function() {
// Start out by adding the height of the location bar to the width, so that
// we can scroll past it
if (ios) {
// iOS reliably returns the innerWindow size for documentElement.clientHeight
// but window.innerHeight is sometimes the wrong value after rotating
// the orientation
var height = document.documentElement.clientHeight;
// Only add extra padding to the height on iphone / ipod, since the ipad
// browser doesn't scroll off the location bar.
if (iphone && !fullscreen) height += 60;
page.style.height = height + 'px';
}
// Scroll after a timeout, since iOS will scroll to the top of the page
// after it fires the onload event
setTimeout(scrollTo, 0, 0, 1);
};
回答by Barney
I struggled with this too. Initially I tried a CSS class (.stretch) defining 200% height and overflow visible, then toggling this on the HTML via script before and after the scrollTo. This doesn't work because the computed 100% height refers back to the available viewport dimensions minus all browser chrome (snapping the status bar back into place).
我也为此苦苦挣扎。最初我尝试了一个定义 200% 高度和溢出可见的 CSS 类 (.stretch)，然后在滚动到之前和之后通过脚本在 HTML 上切换它。这不起作用，因为计算出的 100% 高度指的是可用视口尺寸减去所有浏览器镶边（将状态栏卡回原位）。
Eventually I had to request specific styles to apply dynamically via the DOM API. To add to your additional snippet:
最终我不得不请求特定的样式以通过 DOM API 动态应用。要添加到您的附加代码段：
var CSS = document.documentElement.style;
/mobile/i.test(navigator.userAgent) && !pageYOffset && !location.hash && setTimeout(function () {
CSS.height = '200%';
CSS.overflow = 'visible';
window.scrollTo(0, 1);
CSS.height = window.innerHeight + 'px';
CSS.overflow = 'hidden';
}, 1000);?
However I'd recommend extending Scott Jehl's method, which addresses minor Android/iOS Safari scrollTo differences:
但是我建议扩展 Scott Jehl 的方法，该方法解决了 Android/iOS Safari scrollTo 的细微差异：
