したがって、モバイルChromeはビューポートの高さにアドレスバーを計算します。このため、height: 100vh
は、アドレスバーがスクロールするとビューポートの高さが変わるため、要素では機能しません。
私は実際に 質問を見つける iosで同じ問題を抱えていましたが、さらに調査した結果、これはすべてのモバイルブラウザで発生することに気付きましたChrome=アドレスバーがビューポートからスクロールアウトし、ビューポートにスクロールすると再びビューポートの高さが変わります。
これにより、vh
を使用する要素が再計算され、ページがジャンプします。背景画像を使用すると、スクロール時に画像のサイズが変更されるため、非常に迷惑です。
コードと 例
.jumbotron {
background-image: url(http://example.com/image.png);
background-size: cover;
background-position: top;
background-repeat: no-repeat;
height: 100vh;
}
この問題は、モバイルクロムを使用して上下にスクロールする場合にのみ表示されます。
私の質問はです、これを回避する方法があるかどうか、またはモバイルで全高を計算する方法がない場合は知りたいですchromeページをジャンプさせずに(cssまたはjs)。
http://s.codepen.io/bootstrapped/debug/qadPkz
更新:jqueryを使用する限り、ここで私が思いついたのはかなりうまくいくようです:
function calcVH() {
$('.jumbotron').innerHeight( $(this).innerHeight() );
}
$(window).on('load resize orientationchange', function() {
calcVH();
});
誰かが動作することがわかっているCSSの代替手段を持っている場合でも、javascriptなしでこれを実行できるようにしたいと思います。
[〜#〜] html [〜#〜]
<div id="selector"></div>
[〜#〜] css [〜#〜]
#selector {
height: 100vh;
}
[〜#〜] jquery [〜#〜]
function calcVH() {
$('#selector').innerHeight( $(this).innerHeight() );
}
(function($) {
calcVH();
$(window).on('orientationchange', function() {
calcVH();
});
})(jQuery);
PURE JS(NO JQUERY)
function calcVH() {
var vH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
document.getElementById("selector").setAttribute("style", "height:" + vH + "px;");
}
calcVH();
window.addEventListener('onorientationchange', calcVH, true);
#selector
をcssセレクターに変更します。純粋なjsバージョンを使用する場合、.getElementByID
を .getElementsByClassName
に変更しない限り、IDを使用する必要があります。
私はこれがモバイルの問題であることに気づいていますChrome Android、しかし、それはChrome iOSについても同じであると推測しています。 mobile detect オプションを追加したい場合、これは必要なときにのみ実行されます。個人的には Detectizr を使用します。既に使用しているのでなければ、このようなものを追加する価値はおそらくないでしょう。
うまくいけば、これはすぐに修正されるので、javascriptソリューションは必要ありません。また、ブラウザの幅が変更された場合に備えて、サイズ変更イベントを追加しようとしましたが、この質問を見た後、回答から削除しました。これらを使用してみたい場合は、上記を次のように変更してください。
[〜#〜] jquery [〜#〜]
function calcVH() {
$('#selector').innerHeight( $(this).innerHeight() );
}
(function($) {
calcVH();
$(window).on('orientationchange resize', function() {
calcVH();
});
})(jQuery);
$(window).on('resize orientationchange', function() {
PURE JS(NO JQUERY)
function calcVH() {
var vH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
document.getElementById("selector").setAttribute("style", "height:" + vH + "px;");
}
calcVH();
window.addEventListener('onorientationchange', calcVH, true);
window.addEventListener('resize', calcVH, true);
私はあらゆる提案を試みました...しかし、私には何もうまくいきません。 ChromeまたはIOS。
しかし、その後...私はアイデアを持っていました!
1。標準エントリを先頭に残すことができます
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
2。サイトのFoot(jQueryがあなたの要素について知っていることを確認)にJSを書く
<script type="text/javascript" charset="utf-8">
(function() {
function size() {
// you can change here what you prefer
if (/Android|webos|iphone|ipad|iPod|blackberry|nokia|opera mini|opera mobi|skyfire|maemo|windows phone|Palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase())) {
var theminheight = Math.min(document.documentElement.clientHeight, window.screen.height, window.innerHeight);
//now apply height ... if needed...add html & body ... i need and i use it
$('html body #yourelementofchoise').css('height', theminheight);
}
}
window.addEventListener('resize orientationchange', function() {
size();
}, false);
size();
}());
</script>
。これ以上のナビゲーションバーchromeまたは出力や表示したいものを妨げるものは何もありません
これが誰かの助けになることを本当に願っています!
たぶん、これはそれをはるかに大きくするための単なるテンプレートにすぎません。