iOS 7 iPad SafariランドスケープのinnerHeight / outerHeightレイアウトの問題
IOS 7のSafariで高さが100％のWebアプリで問題が発生しています。window.innerHeight（672px）はwindow.outerHeight（692px）と一致しないようですが、ランドスケープモードのみです。結局のところ、体の高さが100％のアプリでは、20pxの余分なスペースが得られます。これは、ユーザーがアプリをスワイプすると、ナビゲーション要素がブラウザーのクロムの背後に引っ張られることを意味します。また、画面の下部にある絶対位置の要素はすべて20pxオフになります。
この問題は、この質問でも次のように概説されています。 IOS 7-css-html height-100％= 692px
そして、この曖昧なスクリーンショットで見ることができます： 
私たちがやろうとしているのは、これをハックして、Appleがバグを修正するまで心配する必要がないようにすることです。
これを行う1つの方法は、iOS 7でのみ絶対にボディを配置することですが、これにより、ページの下部ではなく上部に20pxが追加されます。
body {
position: absolute;
bottom: 0;
height: 672px !important;
}
OuterHeightをinnerHeightに強制するか、ユーザーがこの問題を認識できないようにハッキングすることで助けていただければ幸いです。
私の場合、解決策は位置を固定に変更することでした：
@media (orientation:landscape) {
html.ipad.ios7 > body {
position: fixed;
bottom: 0;
width:100%;
height: 672px !important;
}
}
IOS 7でiPadを検出するスクリプトも使用しました。
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
$('html').addClass('ipad ios7');
}
シンプルでクリーンなCSSのみのソリューション：
html {
height: 100%;
position: fixed;
width: 100%;
}
iOS 7はこれで高さを正しく設定しているようです。また、javascriptイベントのサイズを変更する必要もありません。フルハイトのアプリで作業しているため、常に位置が固定されているかどうかは重要ではありません。
Terry Thorsenが述べているように、Samuelの答えはうまく機能していますが、WebページがiOSホームに追加された場合は失敗します。
より直感的な修正方法は、window.navigator.standalone var。
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && !window.navigator.standalone) {
$('html').addClass('ipad ios7');
}
この方法は、Safari内で開かれた場合にのみ適用され、自宅から起動された場合には適用されません。
この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)";
}
ユーザーがホーム画面にページを追加すると壊れますが、サミュエルの答えは最高です（ホーム画面のページにはバグが表示されません）。次のようにクラスを追加する前に、innerHeightを確認します。
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
if(window.innerHeight==672){
$('html').addClass('ipad ios7');
}
}
バグはwebviewでは表示されないことに注意してください。
Samuelのアプローチの変形ですが、htmlに-webkit-stickyが設定されているので、私にとっては最高の働きをしました。
@media (orientation:landscape) {
html.ipad.ios7 {
position: -webkit-sticky;
top: 0;
width: 100%;
height: 672px !important;
}
}
「bottom：0」ではなく「top：0」であり、ターゲット要素は「body」ではなく「html」であることに注意してください。
受け入れられた答えを参照して、私は次のルールでも運がありました。
html.ipad.ios7 {
position: fixed;
width: 100%;
height: 100%;
}
これには、html要素が固定のbody要素の下にスクロールするのを止めるように見えるという追加の利点があります。
このバグを回避するにはJavaScriptが必要です。 window.innerHeightの高さは正しいです。私が考えることができる最も簡単な解決策は次のとおりです。
$(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();
});
position: fixedで<body>を設定する必要もあります。
完全で実用的な例を次に示します。
<!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>
お気に入りバーが表示されているとき、受け入れられた答えは対処しません。ここに改善されたキャッチオール修正があります：
@media (orientation:landscape) {
html.ipad.ios7 > body {
position: fixed;
height: calc(100vh - 20px);
width:100%;
}
}
同じ問題でこのページに出くわしました。ここには便利な答えがたくさんありますが、他の答えは（私にとっては）ありません。
しかし、私の場合はうまくいき、現在または過去または未来のどのOSバージョンとどのバグからも完全に独立したソリューションが見つかりました。
説明：クラス名「モジュール」で、フルスクリーンで固定サイズのいくつかのモジュールを使用したWebアプリ（ネイティブアプリなし）の開発
.module {position:absolute; top:0; right:0; bottom:0; left:0;}
クラス名「footer」のフッターが含まれています
.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();
});
Matteo Spinelliのスキルのおかげで、幸いにも変更イベントが発生するので、問題なくiScrollを使用できます。そうでない場合は、修正後にiScroll-initを再度呼び出す必要があります。
これが誰かを助けることを願っています
これを使用する場合：
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && !window.navigator.standalone) {
$('html').addClass('ipad ios7');
}
Mac上のSafariは同じHTMLクラスを表示します... SO正しく動作していません。
私はいくつかのことを組み合わせようとしました-それは私のために働いたので、ブラウザでブラウザビューなしで管理できます。
jQuery
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');
}
}
[〜＃〜] css [〜＃〜]
@media (orientation:landscape) {
html.ipad.browser > body {
position: fixed;
height: 671px !important;
}
}
/////これにより、より柔軟な、または他のOSやブラウザになります
基本的に2つのバグがあります-横長モードのウィンドウの高さと、ユーザーが縦長モードからウィンドウにリワートするときのスクロール位置です。この方法で解決しました。
ウィンドウの高さは次によって制御されます：
// 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);
現在、上記を関数に入れて、ウィンドウのサイズ変更および/または方向変更イベントにバインドできます。それだけです...例を参照してください：