隐藏100%高度的iPhone地址栏 [英] hide iPhone address bar with 100% height

查看:345
本文介绍了隐藏100%高度的iPhone地址栏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

关于此的很多帖子,但不完全符合我的情况。我的页面具有灵活的尺寸设置为100%宽度和100%高度,因此典型的有载滚动功能不起作用。有任何想法或其他解决方案吗?

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?

谢谢!

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);​


推荐答案

Nate Smith的这个解决方案帮助了我:如何在全屏Iphone或Android Web App中隐藏地址栏

This solution from Nate Smith helped me: How to Hide the Address Bar in a Full Screen Iphone or Android Web App.

这是基本位:

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);
};

有关详细信息,请查看他的博客文章要点

For more details, check out his blog post or the Gist.

这篇关于隐藏100%高度的iPhone地址栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆