Adres çubuğu iOS / Android / Mobil Chrome'u gizlediğinde arka plan resmi atlıyor

Şu anda Twitter Bootstrap kullanarak duyarlı bir site geliştiriyorum.

Site, mobil / tablet / masaüstünde tam ekran arka plan resmine sahiptir. Bu görüntüler iki div kullanarak her biri arasında döner ve kaybolur.

Bir sorun dışında neredeyse mükemmel. Android'de iOS Safari, Android Tarayıcı veya Chrome kullanarak, kullanıcı sayfayı aşağı kaydırdığında arka plan hafifçe atlar ve adres çubuğunun gizlenmesine neden olur.

Site burada: http://lt2.daveclarke.me/

Bir mobil cihazda ziyaret edin ve aşağı kaydırın ve resmin yeniden boyutlandırıldığını / taşındığını görmelisiniz.

Arka plan DIV için kullandığım kod aşağıdaki gibidir:

#bg1 {
    background-color: #3d3d3f;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; position:fixed;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    z-index:-1;
    display:none;
}

Tüm önerilerinizi bekliyoruz - bu bir süredir kafamda yapıyor!

Bu sorun,% 100 yükseklik ve "sabit" oldukları için URL çubuklarının küçülmesi / kayması ve # bg1 ve # bg2 div'lerinin boyutunu değiştirmesinden kaynaklanmaktadır. Arka plan görüntüsü "kapak" olarak ayarlandığından, içerdiği alan daha büyük olduğundan görüntü boyutunu / konumunu ayarlar.

Sitenin duyarlı doğasına bağlı olarak, arka plan ölçeklendirilmelidir. İki olası çözümü eğlendiriyorum:

1) # bg1, # bg2 yüksekliğini 100vh olarak ayarlayın. Teorik olarak, bu zarif bir çözüm. Bununla birlikte, iOS'ta bir vh hatası var ( http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/ ). Sorunu önlemek için maksimum yükseklik kullanmaya çalıştım, ancak kaldı.

2) Görünüm boyutu Javascript tarafından belirlendiğinde URL çubuğundan etkilenmez. Bu nedenle, # bg1 ve # bg2'de görünüm boyutuna bağlı olarak statik bir yükseklik ayarlamak için Javascript kullanılabilir. Saf CSS olmadığı ve sayfa yüklemesinde hafif bir görüntü atlaması olduğu için bu en iyi çözüm değildir. Ancak, iOS'un "vh" hataları (iOS 7'de düzeltilmiş görünmüyor) göz önüne alındığında gördüğüm tek geçerli çözüm.

var bg = $("#bg1, #bg2");

function resizeBackground() {
    bg.height($(window).height());
}

$(window).resize(resizeBackground);
resizeBackground();

Bir yan notta, iOS ve Android'deki bu yeniden boyutlandırma URL çubuklarıyla ilgili birçok sorun gördüm. Amacı anlıyorum, ama gerçekten garip işlevsellik ve web sitelerine getirdikleri yıkım ile düşünmek gerekiyor. Son değişiklik, artık kaydırma hilelerini kullanarak iOS veya Chrome'da sayfa yüklemesinde URL çubuğunu "gizleyemeyeceğinizdir".

EDIT: Yukarıdaki komut dosyası arka plan yeniden boyutlandırma tutmak için mükemmel çalışıyor olsa da, kullanıcılar aşağı kaydırma farkedilir bir boşluk neden olur. Bunun nedeni, arka planın ekran yüksekliğinin% 100'ünü URL çubuğundan eksi olarak tutmasıdır. İsviçre'nin önerdiği gibi, yüksekliğe 60 piksel eklersek, bu sorun ortadan kalkar. Bu, URL çubuğu varken arka plan resminin alt 60 piksini göremediğimiz anlamına gelir, ancak kullanıcıların bir boşluk görmesini engeller.

function resizeBackground() {
    bg.height( $(window).height() + 60);
}

Jason'ın cevabının benim için pek işe yaramadığını gördüm ve hala bir sıçrama yapıyordum. Javascript, sayfanın üst kısmında boşluk olmamasını sağladı, ancak adres çubuğu her kaybolduğunda / yeniden görüntülendiğinde arka plan hâlâ atlıyordu. Javascript düzeltmesinin yanı sıra div'e başvurdum transition: height 999999s. Bu, öğeyi neredeyse dondurduğu kadar uzun süreli bir geçiş oluşturur.

Web sitemizin başlığında da benzer bir sorun var.

html, body {
    height:100%;
}
.header {
    height:100%;
}

Bu, android kromunda ürkek bir kaydırma deneyimiyle sonuçlanacak, çünkü .header kapsayıcı url çubuğu gizlendikten ve parmak ekrandan kaldırıldıktan sonra yeniden ölçeklendirilecek.

CSS-Çözüm:

Aşağıdaki iki satırı eklemek, URL çubuğunun gizlenmesini ve dikey kaydırmanın hala mümkün olmasını önler:

html {
    overflow: hidden;
}
body {
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch;
}

Sorun bir medya sorgusu ve bazı matematik ile çözülebilir. İşte bir portait yönlendirme için bir çözüm:

@media (max-device-aspect-ratio: 3/4) {
  height: calc(100vw * 1.333 - 9%);
}
@media (max-device-aspect-ratio: 2/3) {
  height: calc(100vw * 1.5 - 9%);
}
@media (max-device-aspect-ratio: 10/16) {
  height: calc(100vw * 1.6 - 9%);
}
@media (max-device-aspect-ratio: 9/16) {
  height: calc(100vw * 1.778 - 9%);
}

URL çubuğu kaybolduğunda vh değişeceğinden, yüksekliği başka bir şekilde belirlemeniz gerekir. Neyse ki, görünümün genişliği sabittir ve mobil cihazlar sadece birkaç farklı en boy oranına sahiptir; genişlik ve en boy oranını belirleyebiliyorsanız, biraz matematik size vh'nin çalışması gerektiği gibi görünüm yüksekliğini verecektir . İşte süreç

1) Hedeflemek istediğiniz en boy oranları için bir dizi medya sorgusu oluşturun.

• URL oranı kaybolduğunda ikincisi yeniden boyutlandırılacağı için en boy oranı yerine cihaz en boy oranını kullanın

• En popülerler arasında takip edilen en boy oranlarını hedeflemek için cihaz en boy oranına 'max' değerini ekledim. Onlar kadar kesin olmayacaklar, ancak sadece az bir kullanıcı için olacaklar ve hala uygun vh'ye oldukça yakın olacaklar.

• yatay / dikey kullanarak medya sorgusunu hatırlayın, bu nedenle portait için sayıları çevirmeniz gerekir

2) her ortam sorgusu için, öğenin vw cinsinden olmasını istediğiniz dikey yükseklik yüzdesini en boy oranının tersiyle çarpın.

• Genişliğin ve genişliğin yüksekliğe oranını bildiğiniz için, istediğiniz% 'yi (sizin durumunuzda% 100) yükseklik / genişlik oranı ile çarpmanız yeterlidir.

3) URL çubuğu yüksekliğini ve ardından eksi yükseklikten belirlemeniz gerekir. Kesin ölçümler bulamadım, ancak manzaradaki mobil cihazlar için% 9 kullanıyorum ve bu oldukça iyi çalışıyor gibi görünüyor.

Bu çok zarif bir çözüm değil, ancak diğer seçenekler de iyi değil:

• Web sitenizin kullanıcı için hatalı görünmesi,

• uygun olmayan boyutta elemanlara sahip olması veya

• Bazı temel stiller için javascript kullanmak ,

Dezavantajı, bazı cihazların en popüler olanlardan farklı url çubuğu yüksekliklerine veya en boy oranlarına sahip olabilmesidir. Bununla birlikte, yalnızca az sayıda cihaz birkaç pikselin toplanması / çıkarılmasından muzdaripse, bu benim için kaydırma yaparken bir web sitesi yeniden boyutlandırılan herkesten çok daha iyi görünüyor.

Bunu kolaylaştırmak için bir SASS karışımı da oluşturdum:

@mixin vh-fix {
  @media (max-device-aspect-ratio: 3/4) {
    height: calc(100vw * 1.333 - 9%);
  }
  @media (max-device-aspect-ratio: 2/3) {
    height: calc(100vw * 1.5 - 9%);
  }
  @media (max-device-aspect-ratio: 10/16) {
    height: calc(100vw * 1.6 - 9%);
  }
  @media (max-device-aspect-ratio: 9/16) {
    height: calc(100vw * 1.778 - 9%);
  }
}

Buradaki tüm yanıtlar windowURL çubuğundan etkilenen yüksekliği kullanıyor . Herkes screenboyunu unuttu mu?

İşte benim jQuery çözüm:

$(function(){

  var $w = $(window),
      $background = $('#background');

  // Fix background image jump on mobile
  if ((/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera)) {
    $background.css({'top': 'auto', 'bottom': 0});

    $w.resize(sizeBackground);
    sizeBackground();
  }

  function sizeBackground() {
     $background.height(screen.height);
  }
});

Parçanın eklenmesi, .css()kaçınılmaz olarak yukarı hizalanmış mutlak konumlandırılmış öğeyi alta hizalanmış olarak değiştirir, bu nedenle hiç atlama olmaz. Herhalde, bunu doğrudan normal CSS'ye eklememek için hiçbir neden yok.

Masaüstlerindeki ekran yüksekliği yardımcı olmayacağından kullanıcı aracısı sniffer'ına ihtiyacımız var.

Ayrıca, tüm #backgroundbunlar pencereyi dolduran sabit konumlu bir eleman olduğu varsayılır .

JavaScript kullanıcıları için (uyarı - test edilmemiş):

var background = document.getElementById('background');

// Fix background image jump on mobile
if ((/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera)) {
  background.style.top = 'auto';
  background.style.bottom = 0;

  window.onresize = sizeBackground;
  sizeBackground();
}

function sizeBackground() {
  background.style.height = screen.height;
}

EDIT: Bunun doğrudan birden fazla arka plan ile ilgili özel sorununuzu cevap değil üzgünüm. Ancak bu, sabit arka planların mobilde atlama sorununu ararken ilk sonuçlardan biridir.

Tüm manzarayı kapsayacak bir giriş ekranı oluşturmaya çalışırken de bu sorunla karşılaştım. Ne yazık ki, kabul edilen cevap artık çalışmıyor.

1) Yüksekliği ayarlanmış elemanlar 100vh görünen URL çubuğunun (dis) neden olduğu durumlar da dahil olmak üzere, görünüm alanı boyutu her değiştiğinde yeniden boyutlandırılacak şekilde .

2) $(window).height()URL çubuğunun boyutundan da etkilenen değerleri döndürür.

Bir çözüm, AlexKempton'un cevabındatransition: height 999999s önerildiği şekilde elementi "dondurmak" tır . Dezavantajı, bunun ekran döndürmeden kaynaklananlar da dahil olmak üzere tüm görüntü alanı boyutu değişikliklerine uyumu etkili bir şekilde devre dışı bırakmasıdır.

Bu yüzden benim çözümüm, JavaScript kullanarak görünüm alanı değişikliklerini manuel olarak yönetmektir. Bu, URL çubuğunun neden olabileceği küçük değişiklikleri görmezden gelmemi ve yalnızca büyük olanlara tepki vermemi sağlıyor.

function greedyJumbotron() {
    var HEIGHT_CHANGE_TOLERANCE = 100; // Approximately URL bar height in Chrome on tablet

    var jumbotron = $(this);
    var viewportHeight = $(window).height();

    $(window).resize(function () {
        if (Math.abs(viewportHeight - $(window).height()) > HEIGHT_CHANGE_TOLERANCE) {
            viewportHeight = $(window).height();
            update();
        }
    });

    function update() {
        jumbotron.css('height', viewportHeight + 'px');
    }

    update();
}

$('.greedy-jumbotron').each(greedyJumbotron);

EDIT: Aslında ben bu tekniği birlikte kullanın height: 100vh. Sayfa en baştan düzgün bir şekilde oluşturulur ve ardından javascript devreye girer ve yüksekliği manuel olarak yönetmeye başlar. Bu şekilde, sayfa yüklenirken (hatta daha sonra) hiçbir titreme olmaz.

Şu anda kullandığım çözüm , rahatsız edici tarayıcılardan biri olup olmadığını görmek için userAgentaçık olup olmadığını kontrol etmektir $(document).ready. Öyleyse, şu adımları izleyin:

1. İlgili yükseklikleri '% 100' yerine mevcut görünüm yüksekliğine ayarlayın
2. Geçerli görünüm alanı yatay değerini kaydetme
3. Ardından, $(window).resizeyalnızca yeni yatay görüntü alanı boyutu başlangıç ​​değerinden farklıysa ilgili yükseklik değerlerini güncelleyin
4. Yeni yatay ve dikey değerleri kaydetme

İsteğe bağlı olarak, dikey yeniden boyutlandırmaya izin vermeyi yalnızca adres çubuklarının yüksekliğinin ötesindeyken de test edebilirsiniz.

Oh, ve adres çubuğu etkileniyor $(window).height. Bkz. Mobil Webkit tarayıcısı (krom) adres çubuğu $ (window) .height (); arka plan boyutu yapma: JS "Pencere" genişlik-yükseklik vs "ekran" genişlik-yükseklik her zaman yeniden ölçeklendirme kapak ?

Javascript kullanmadan gerçekten kolay bir çözüm buldum:

transition: height 1000000s ease;
-webkit-transition: height 1000000s ease;
-moz-transition: height 1000000s ease;
-o-transition: height 1000000s ease;

Bütün bunlar hareketi geciktirmek, böylece fark edilmeyecek kadar yavaş.

Benim çözüm biraz javascript içeriyordu. Div'de% 100 veya 100vh değerini koruyun (bu, div'ın ilk sayfa yüklemesinde görünmemesini sağlar). Ardından sayfa yüklendiğinde pencere yüksekliğini alın ve söz konusu öğeye uygulayın. Atlamadan kaçınır çünkü artık div'inizde statik bir yükseklik var.

var $hero = $('#hero-wrapper'),
    h     = window.innerHeight;

$hero.css('height', h);

VH ünitelerini kullanmak için vanilya javascript çözümü oluşturdum. VH'yi hemen hemen her yerde kullanmak, kaydırmada en aza indiren adres çubuklarından etkilenir. Sayfa yeniden çizildiğinde gösterilen jank düzeltmek için, VH birimleri kullanarak tüm öğelerinizi kapmak (onlara sınıf .vh-fixverirseniz) ve onlara satır içi piksel yükseklikleri verecek bu js var . Aslında onları istediğimiz yükseklikte dondurmak. Duyarlı kalmak için bunu rotasyonda veya görünüm alanı boyutu değişikliğinde yapabilirsiniz.

var els = document.querySelectorAll('.vh-fix')
if (!els.length) return

for (var i = 0; i < els.length; i++) {
  var el = els[i]
  if (el.nodeName === 'IMG') {
    el.onload = function() {
      this.style.height = this.clientHeight + 'px'
    }
  } else {
    el.style.height = el.clientHeight + 'px'
  }
}

Bu tüm kullanım durumlarımı çözdü, umarım yardımcı olur.

Bu benim çözüm bu sorunu çözmek için, doğrudan kod üzerine yorum ekledim. Bu çözümü test ettim ve iyi çalışıyor. Herkesin de aynı sorunu yaşayacağını umuyoruz.

//remove height property from file css because we will set it to first run of page
//insert this snippet in a script after declarations of your scripts in your index

var setHeight = function() {    
  var h = $(window).height();   
  $('#bg1, #bg2').css('height', h);
};

setHeight(); // at first run of webpage we set css height with a fixed value

if(typeof window.orientation !== 'undefined') { // this is more smart to detect mobile devices because desktop doesn't support this property
  var query = window.matchMedia("(orientation:landscape)"); //this is is important to verify if we put 
  var changeHeight = function(query) {                      //mobile device in landscape mode
    if (query.matches) {                                    // if yes we set again height to occupy 100%
      setHeight(); // landscape mode
    } else {                                                //if we go back to portrait we set again
      setHeight(); // portrait mode
    }
  }
  query.addListener(changeHeight);                          //add a listner too this event
} 
else { //desktop mode                                       //this last part is only for non mobile
  $( window ).resize(function() {                           // so in this case we use resize to have
    setHeight();                                            // responsivity resisizing browser window
  }); 
};

Bu, denediğim her şeyin üstünde en iyi çözüm (en basit).

... Ve bu adres çubuğunun yerel deneyimini korumaz !

Örneğin, CSS ile yüksekliği% 100 olarak ayarlayabilir ve ardından belge yüklendiğinde, javascript ile pencere yüksekliğinin yüksekliğini 0.9 * olarak ayarlayabilirsiniz.

Örneğin jQuery ile:

$("#element").css("height", 0.9*$(window).height());

)

Ne yazık ki saf CSS: P ile çalışan bir şey yok, ama aynı zamanda iPhone'larda buggy olan vhve vwkullanmayın - yüzdeleri kullanın.

Genişlik öğemi javascript ile ayarladım. De vh'yi ayarladıktan sonra.

html

<div id="gifimage"><img src="back_phone_back.png" style="width: 100%"></div>

css

#gifimage {
    position: absolute;
    height: 70vh;
}

javaScript

imageHeight = document.getElementById('gifimage').clientHeight;

// if (isMobile)       
document.getElementById('gifimage').setAttribute("style","height:" + imageHeight + "px");

Bu benim için çalışıyor. Ben jquery vb kullanmıyorum. çünkü mümkün olan en kısa sürede yüklenmesini istiyorum.

Bu sorunun tüm ayrıntılarını anlamak ve en iyi uygulamayı anlamak birkaç saat sürdü. Nisan 2016'dan itibaren sadece iOS Chrome'da bu sorun var. Android Chrome ve iOS Safari'de denedim - bu düzeltme olmadan ikisi de iyiydi. Bu yüzden kullandığım iOS Chrome için düzeltme:

$(document).ready(function() {
   var screenHeight = $(window).height();
   $('div-with-background-image').css('height', screenHeight + 'px');
});

Arka planınız izin veriyorsa basit yanıt, neden arka plan boyutu ayarlamıyorsunuz: yalnızca aygıt genişliğini medya sorgularıyla kaplayan ve aşağıdakilerle birlikte kullanın: after position: fixed; buraya hack .

IE: arka plan boyutu: 901 piksel; 900 pikselden küçük ekranlar için? Mükemmel veya duyarlı değil ama soyut bir BG kullanıyorum gibi <480px mobil benim için bir cazibe çalıştı.

Bu geçici çözümü kullanıyorum: Sayfa yükü üzerinde bg1 yüksekliğini düzeltme:

var BG = document.getElementById('bg1');
BG.style.height = BG.parentElement.clientHeight;

Ardından, pencereye yeniden boyutlandırma olay dinleyicisi ekleyin: bunu yeniden boyutlandırdıktan sonra yükseklik farkı 60 pikselden (url çubuk yüksekliğinden daha fazla bir şey) daha sonra hiçbir şey yapmayın ve 60 pikselden büyükse, bg1'in yüksekliğini tekrar ebeveyninin yüksekliğine ayarlayın! tam kod:

window.addEventListener("resize", onResize, false);
var BG = document.getElementById('bg1');
BG.style.height = BG.parentElement.clientHeight;
var oldH = BG.parentElement.clientHeight;

function onResize() {
    if(Math.abs(oldH - BG.parentElement.clientHeight) > 60){
      BG.style.height = BG.parentElement.clientHeight + 'px';
      oldH = BG.parentElement.clientHeight;
    }
}

Not: Bu hata çok rahatsız edici!

@AlexKempton yanıtına benzer. (üzgünüm yorum yapamadım)

Öğenin yeniden boyutlandırılmasını önlemek için uzun geçiş gecikmeleri kullanıyorum.

Örneğin:

transition: height 250ms 600s; /*10min delay*/

Bunun sonucu, cihaz döndürme de dahil olmak üzere öğenin yeniden boyutlandırılmasını engellemesidir, ancak orientationchangebu bir sorun olsaydı yüksekliği algılamak ve sıfırlamak için bazı JS kullanabilirsiniz .

Chrome mobil tarayıcı URL çubuğunun gösterilenden gizli veya tersine geçişi sırasında pencerenin gerçek iç yüksekliğini ve dikey kaydırmasını dinlemek isteyenler için, bulduğum tek çözüm bir aralık işlevi ayarlamak ve window.innerHeightönceki değeri ile tutarsızlığını ölçmek .

Bu, bu kodu tanıtır:

var innerHeight = window.innerHeight;
window.setInterval(function ()
{
  var newInnerHeight = window.innerHeight;
  if (newInnerHeight !== innerHeight)
  {
    var newScrollY = window.scrollY + newInnerHeight - innerHeight;
    // ... do whatever you want with this new scrollY
    innerHeight = newInnerHeight;
  }
}, 1000 / 60);

Bunun kullanışlı olacağını umuyorum. Daha iyi bir çözüm bilen var mı?

Benzer bir problem yaşarken karşılaştığım çözüm, olay window.innerHeighther touchmovebaşlatıldığında eleman yüksekliğini ayarlamaktı .

var lastHeight = '';

$(window).on('resize', function () {
    // remove height when normal resize event is fired and content redrawn
    if (lastHeight) {
        $('#bg1').height(lastHeight = '');
    }
}).on('touchmove', function () {
    // when window height changes adjust height of the div
    if (lastHeight != window.innerHeight) {
        $('#bg1').height(lastHeight = window.innerHeight);
    }
});

Bu, öğeyi her zaman kullanılabilir ekranın tam olarak% 100'ünü kaplar, daha fazla ve daha az değil. Adres çubuğunun gizlenmesi veya gösterilmesi sırasında bile.

Yine de, basit position: fixedolması gereken bu tür yamalar bulmamız üzücü .

İOS'taki CSS özel özelliklerini (değişkenleri) destekleyerek bunları JS ile ayarlayabilir ve yalnızca iOS'ta kullanabilirsiniz.

const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS) {
  document.body.classList.add('ios');
  const vh = window.innerHeight / 100;
  document.documentElement.style
    .setProperty('--ios-10-vh', `${10 * vh}px`);
  document.documentElement.style
    .setProperty('--ios-50-vh', `${50 * vh}px`);
  document.documentElement.style
    .setProperty('--ios-100-vh', `${100 * vh}px`);
}

body.ios {
    .side-nav {
        top: var(--ios-50-vh);
    }
    section {
        min-height: var(--ios-100-vh);
        .container {
            position: relative;
            padding-top: var(--ios-10-vh);
            padding-bottom: var(--ios-10-vh);
        }
    }
}

Cevabım buraya gelen herkes için (benim yaptığım gibi) gizleme adresi çıplak / tarayıcı arayüzünün neden olduğu bir hataya cevap bulmak.

Gizleme adres çubuğu resize-event'in tetiklenmesine neden olur. Ancak yatay moda geçmek gibi diğer yeniden boyutlandırma olaylarından farklı olarak, bu pencerenin genişliğini değiştirmez. Benim çözümüm, yeniden boyutlandırma olayına bağlanmak ve genişliğin aynı olup olmadığını kontrol etmektir.

// Keep track of window width
let myWindowWidth = window.innerWidth;

window.addEventListener( 'resize', function(event) {

    // If width is the same, assume hiding address bar
    if( myWindowWidth == window.innerWidth ) {
         return;
    }

    // Update the window width
    myWindowWidth = window.innerWidth;

    // Do your thing
    // ...
});