JQuery移动100％高度的页面，这等于可见区域

我在处理iPhone上的网站高度时遇到了问题。以下设置在所有其他设备（ipad，android手机）上运行得非常好，但在iphone设备上，网址栏消失后页面高度不会更新，并且页面底部会显示空白区域。JQuery移动100％高度的页面，这等于可见区域

<!DOCTYPE html> 
<html> 
    <head> 
     <title>temp</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
     <meta name="apple-mobile-web-app-capable" content="yes" /> 

     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 

     <style type="text/css"> 
      .ui-page{ 
       min-height: 100% !important; 
      } 
     </style>  
    </head> 

    <body> 
     <div data-role="page" id="loadscreen" data-theme='c'> 
      <div data-role="content"> 
       <div> 
        <a href="#" onClick="window.scrollTo(0, 1)">Scroll Up</a> 
       </div> 
      </div><!-- /content --> 
     </div><!-- /page --> 
    </body> 
</html>

网站：http://jsfiddle.net/hb8NH/2/

来源

2011-12-15 Simon D.

尝试改变下列

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

要

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

它舒尔不招我。

来源

2011-12-15 13:51:23

对不起，没有为我工作。 iPhone上的问题仍然存在。 – 2011-12-15 14:28:23

删除

.ui-page{ 
    min-height: 100% !important; 
}

JQueryMobile计算必要的高度并设置最小高度风格的网页，以确保它填补了整个页面。

你会注意到，在Safari中的iPhone（删除最小高度后），你会得到一个轻微的过度滚动可用，将隐藏你的“向上滚动”文本。 JQueryMobile根据我认为的屏幕大小计算最小高度。这样，如果保存到iPhone的主屏幕（没有Safari浏览器工具栏，页眉或页脚），页面仍然会填满屏幕。

来源

2012-08-02 20:23:28 JDubDev

尝试设置webView的原生属性：

// fix orientation issue 
[webView setAutoresizingMask:(UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth)];

这为我工作。

来源

2013-10-21 12:21:27

恩，那是你说的错语言;） – 2014-03-17 14:58:29

JQuery移动100％高度的页面，这等于可见区域

回答

相关问题