Css iOS 7 iPad Safari横向内高/外高布局问题
在iOS 7中，Safari上的web应用程序高度为100%，我们发现了一些问题。看起来window.innerHeight（672px）与window.outerHeight（692px）不匹配，但仅在横向模式下匹配。最终的结果是，在一个身体高度为100%的应用程序中，你可以获得20像素的额外空间。这意味着当用户在我们的应用程序上滑动时，导航元素会被拖到浏览器chrome的后面。这也意味着任何位于屏幕底部的绝对定位元素最终都会被关闭20px 本问题中也概述了这一问题： 在这个模棱两可的屏幕截图中可以看到： 我们要做的是绕过这个漏洞，这样在苹果修复这个漏洞之前，我们就不必担心它了 一种方法是仅在iOS 7中绝对定位正文，但这几乎将额外的20px放在页面顶部而不是底部：Css iOS 7 iPad Safari横向内高/外高布局问题,css,ipad,safari,ios7,Css,Ipad,Safari,Ios7,在iOS 7中，Safari上的web应用程序高度为100%，我们发现了一些问题。看起来window.innerHeight（672px）与window.outerHeight（692px）不匹配，但仅在横向模式下匹配。最终的结果是，在一个身体高度为100%的应用程序中，你可以获得20像素的额外空间。这意味着当用户在我们的应用程序上滑动时，导航元素会被拖到浏览器chrome的后面。这也意味着任何位于屏幕底部的绝对定位元素最终都会被关闭20px 本问题中也概述了这一问题： 在这个模棱两可的屏幕截
body {
position: absolute;
bottom: 0;
height: 672px !important;
}
html{ bottom: 0;padding:0;margin:0}body {
position: absolute;
bottom: 0;
height: 672px !important;
}
在我的案例中，解决方案是将定位更改为固定：
@media (orientation:landscape) {
html.ipad.ios7 > body {
position: fixed;
bottom: 0;
width:100%;
height: 672px !important;
}
}
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
$('html').addClass('ipad ios7');
}
基本上有两个错误-横向模式下窗口的高度和用户从纵向模式重新写入窗口时的滚动位置。我们这样解决了这个问题： 窗口的高度由以下各项控制：
// window.innerHeight is not supported by IE
var winH = window.innerHeight ? window.innerHeight : $(window).height();
// set the hight of you app
$('#yourAppID').css('height', winH);
// scroll to top
window.scrollTo(0,0);
塞缪尔的答案是最好的，尽管如果用户将页面添加到他们的主屏幕（主屏幕页面不会显示错误）时，答案会中断。在添加类之前检查innerHeight，如下所示：
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
if(window.innerHeight==672){
$('html').addClass('ipad ios7');
}
}
请注意，该错误也不会在webview下出现。我使用此JavaScript解决方案来解决该问题：
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && window.innerHeight != document.documentElement.clientHeight) {
var fixViewportHeight = function() {
document.documentElement.style.height = window.innerHeight + "px";
if (document.body.scrollTop !== 0) {
window.scrollTo(0, 0);
}
}.bind(this);
window.addEventListener("scroll", fixViewportHeight, false);
window.addEventListener("orientationchange", fixViewportHeight, false);
fixViewportHeight();
document.body.style.webkitTransform = "translate3d(0,0,0)";
}
正如特里·索森（Terry Thorsen）所说，塞缪尔的回答非常有效，但如果网页被添加到iOS主页中，则会失败 更直观的修复方法是检查
window.navigator.standaloneif (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && !window.navigator.standalone) {
$('html').addClass('ipad ios7');
}
这样，它只在Safari内部打开时适用，而在从家中启动时不适用。您需要JavaScript来解决此错误<代码>窗口。内部高度具有正确的高度。以下是我能想到的最简单的解决方案：
$(function() {
function fixHeightOnIOS7() {
var fixedHeight = Math.min(
$(window).height(), // This is smaller on Desktop
window.innerHeight || Infinity // This is smaller on iOS7
);
$('body').height(fixedHeight);
}
$(window).on('resize orientationchange', fixHeightOnIOS7);
fixHeightOnIOS7();
});
位置：fixed<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>iOS7 height bug fix</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function() {
function fixHeightOnIOS7() {
var fixedHeight = Math.min(
$(window).height(),
window.innerHeight || Infinity
);
$('body').height(fixedHeight);
}
$(window).on('resize orientationchange', fixHeightOnIOS7);
fixHeightOnIOS7();
// Generate content
var contentHTML = $('#content').html();
for (var i = 0; i < 8; i++) contentHTML += contentHTML;
$('#content').html(contentHTML);
});
</script>
<style>
html,
body
{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: auto;
position: fixed;
}
#page-wrapper
{
height: 100%;
position: relative;
background: #aaa;
}
#header,
#footer
{
position: absolute;
width: 100%;
height: 30px;
background-color: #666;
color: #fff;
}
#footer
{
bottom: 0;
}
#content
{
position: absolute;
width: 100%;
top: 30px;
bottom: 30px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
</style>
</head>
<body>
<div id="page-wrapper">
<div id="header">Header</div>
<div id="content">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
iOS7高度错误修复
$（函数（）{
函数固定高度ONIS7（）{
var fixedHeight=Math.min(
$（窗口）.height（），
window.innerHeight | |无穷大
);
$（'body'）。高度（固定高度）；
}
$（窗口）.on（'resize orientationchange'，FixeHeightOnIs7'）；
固定高度为7（）；
//生成内容
var contentHTML=$（'#content'）.html（）；
对于（var i=0；i<8；i++）contentHTML++=contentHTML；
$（'#content'）.html（contentHTML）；
});
html，
身体
{
保证金：0；
填充：0；
身高：100%；
宽度：100%；
溢出：自动；
位置：固定；
}
#页面包装器
{
身高：100%；
位置：相对位置；
背景：#aaa；
}
#标题，
#页脚
{
位置：绝对位置；
宽度：100%；
高度：30px；
背景色：#666；
颜色：#fff；
}
#页脚
{
底部：0；
}
#内容
{
位置：绝对位置；
宽度：100%；
顶部：30px；
底部：30px；
溢出：自动；
-webkit溢出滚动：触摸；
}
标题
Lorem ipsum dolor sit amet
页脚
html.ipad.ios7 {
position: fixed;
width: 100%;
height: 100%;
}
这样做的另一个优点是，它似乎可以阻止html元素在固定体元素下滚动。简单、更干净的CSS唯一解决方案：
html {
height: 100%;
position: fixed;
width: 100%;
}
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && !window.navigator.standalone) {
$('html').addClass('ipad ios7');
}
if (navigator.userAgent.match(/iPad/i) && (window.orientation) ){
$('html').addClass('ipad ');
if (window.innerHeight != window.outerHeight ){
$('html').addClass('browser landscape');
}
else{
$('html').addClass('browser portrait');
}
}
@media (orientation:landscape) {
html.ipad.browser > body {
position: fixed;
height: 671px !important;
}
}
/////有了它，您可以更灵活地使用其他操作系统和浏览器我看到这个页面也是为了同样的问题。 这里有很多有用的答案，其他的（对我来说）没有 然而，我找到了一个解决方案，它在我的情况下是有效的，并且完全独立于现在、过去或将来的哪个操作系统版本和哪个bug 说明：开发一个web应用程序（非本机应用程序），全屏显示多个固定大小的模块，类名为“模块” 其中包含类名为“footer”的页脚 无论如何，如果我稍后将页脚的高度设置为另一个高度，或者甚至其高度是由其内容设置的，我可以使用以下代码进行更正：
function res_mod(){
$('.module').css('bottom', 0); // <-- need to be reset before calculation
var h = $('.module > .footer').height();
var w = window.innerHeight;
var o = $('.module > .footer').offset();
var d = Math.floor(( w - o.top - h )*( -1 ));
$('.module').css('bottom',d+'px'); // <--- this makes the correction
}
$(window).on('resize orientationchange', res_mod);
$(document).ready(function(){
res_mod();
});
函数res_mod（）{
$（'.module'）.css（'bottom'，0）；//Sam的变体
.module > .footer {position:absolute; right:0; bottom:0; left:0; height:90px;}
function res_mod(){
$('.module').css('bottom', 0); // <-- need to be reset before calculation
var h = $('.module > .footer').height();
var w = window.innerHeight;
var o = $('.module > .footer').offset();
var d = Math.floor(( w - o.top - h )*( -1 ));
$('.module').css('bottom',d+'px'); // <--- this makes the correction
}
$(window).on('resize orientationchange', res_mod);
$(document).ready(function(){
res_mod();
});
@media (orientation:landscape) {
html.ipad.ios7 {
position: -webkit-sticky;
top: 0;
width: 100%;
height: 672px !important;
}
}
@media (orientation:landscape) {
html.ipad.ios7 > body {
position: fixed;
height: calc(100vh - 20px);
width:100%;
}
}