Gambar latar belakang melonjak saat bilah alamat menyembunyikan iOS / Android / Mobile Chrome


174

Saat ini saya sedang mengembangkan situs responsif menggunakan Bootstrap Twitter.

Situs ini memiliki gambar latar belakang layar penuh di ponsel / tablet / desktop. Gambar-gambar ini berputar dan memudar melalui masing-masing, menggunakan dua div.

Hampir sempurna, kecuali satu masalah. Menggunakan iOS Safari, Browser Android atau Chrome di Android latar belakang sedikit melompat ketika pengguna menggulir ke bawah halaman dan menyebabkan bilah alamat bersembunyi.

Situsnya ada di sini: http://lt2.daveclarke.me/

Kunjungi di perangkat seluler dan gulir ke bawah dan Anda akan melihat ukuran gambar / pindahkan.

Kode yang saya gunakan untuk DIV latar belakang adalah sebagai berikut:

#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;
}

Semua saran diterima - ini sudah cukup lama saya lakukan !!


Tautan Anda memerlukan auth ... juga, tunjukkan kami beberapa kode, mohon!
Shawn Taylor

Tautan baru ditambahkan & kode yang ditampilkan untuk posisi latar belakang dll.
Dave Clarke

1
Jika Anda mengalami masalah ini, Anda mungkin ingin memeriksa developers.google.com/web/updates/2016/12/url-bar-resizing . Masalah ini telah (semacam) telah diatasi sekarang, tetapi masih mempengaruhi elemen-elemen yang ada position: fixed.
Adam Reis

@AdamReis Akhirnya! Terima kasih telah mengirim
Dave Clarke

Jawaban:


106

Masalah ini disebabkan oleh bilah URL menyusut / meluncur keluar dari jalan dan mengubah ukuran div # bg1 dan # bg2 karena mereka 100% tinggi dan "tetap". Karena gambar latar diatur ke "cover", gambar akan menyesuaikan ukuran / posisi gambar karena area yang mengandung lebih besar.

Berdasarkan sifat responsif situs, latar belakang harus diukur. Saya menghibur dua solusi yang mungkin:

1) Atur # bg1, # bg2 tinggi ke 100vh. Secara teori, ini solusi yang elegan. Namun, iOS memiliki vh bug ( http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/ ). Saya mencoba menggunakan ketinggian max untuk mencegah masalah, tetapi tetap saja.

2) Ukuran viewport, ketika ditentukan oleh Javascript, tidak terpengaruh oleh bilah URL. Oleh karena itu, Javascript dapat digunakan untuk mengatur ketinggian statis pada # bg1 dan # bg2 berdasarkan ukuran viewport. Ini bukan solusi terbaik karena ini bukan CSS murni dan ada sedikit lompatan gambar pada pemuatan halaman. Namun, ini adalah satu-satunya solusi yang saya lihat mengingat bug "vh" iOS (yang tampaknya tidak diperbaiki di iOS 7).

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

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

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

Di samping catatan, saya telah melihat begitu banyak masalah dengan bilah ukuran URL ini di iOS dan Android. Saya mengerti tujuannya, tetapi mereka benar-benar perlu memikirkan fungsionalitas aneh dan malapetaka yang mereka bawa ke situs web. Perubahan terbaru, adalah Anda tidak lagi dapat "menyembunyikan" bilah URL saat memuat halaman di iOS atau Chrome menggunakan trik gulir.

EDIT: Meskipun skrip di atas berfungsi dengan baik untuk menjaga ukuran latar belakang, itu menyebabkan jeda ketika pengguna menggulir ke bawah. Ini karena menjaga ukuran latar belakang hingga 100% dari tinggi layar dikurangi bilah URL. Jika kita menambahkan 60px ke ketinggian, seperti yang disarankan swiss, masalah ini hilang. Itu berarti kita tidak bisa melihat 60px bawah gambar latar belakang ketika URL bar hadir, tetapi itu mencegah pengguna dari pernah melihat celah.

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

Terima kasih untuk ini. Saya akan memberikan pusaran besok dan memberi tahu Anda bagaimana caranya :)
Dave Clarke

5
Ini luar biasa. Saya telah mengimplementasikan solusi kedua Anda, yang bekerja hampir sempurna dengan hanya beberapa celah piksel antara catatan kaki & gambar latar. Saya mengubah baris kode ke-4 menjadi: bg.height(jQuery(window).height() + 60);yang bekerja dengan indah di semua perangkat saya! Terima kasih :)
Dave Clarke

6
bug iOS vh diperbaiki di iOS8 tetapi masalah pada Android tidak. Saya menggunakan vhunit dan tentu saja 100vhlebih besar ketika bilah alamat disembunyikan. Sungguh bodoh bahwa lompatan ini terjadi setelah scrolling berhenti. Itu hanya terlihat buggy. Saya akhirnya menggunakan transisi pada ketinggian untuk membuatnya tampak disengaja.
ProblemsOfSumit

1
Saya dapat mengatasi masalah ini dengan memindahkan latar belakang dari bodyke pembungkus yang <div>membungkus seluruh isi halaman. Tidak ada latar belakang melompat di iOS atau Android!
Marius Schulz

2
Solusi JS tidak berfungsi untuk saya (Android). Mengonfirmasi bahwa skrip sedang mengatur ketinggian, tetapi masalah tetap ada.
jwinn

61

Saya menemukan bahwa jawaban Jason tidak bekerja untuk saya dan saya masih mendapatkan lompatan. Javascript memastikan tidak ada celah di bagian atas halaman tetapi latar belakang masih melompat setiap kali bilah alamat menghilang / muncul kembali. Jadi seperti halnya memperbaiki Javascript, saya melamar transition: height 999999ske div. Ini menciptakan transisi dengan durasi yang sangat lama sehingga hampir membekukan elemen.


24
Anda layak mendapatkan +1 untuk pemikiran di luar kebiasaan. Sayangnya ini mencegah penyesuaian ukuran div ke setiap perubahan ukuran layar, termasuk untuk contoh yang disebabkan oleh rotasi layar.
tobik

+1 untuk kreativitas! Mungkin harus menggunakan ini untuk saat ini sebagai masalah yang berkembang jika Anda menggunakan vwatau vhuntuk mengatur ukuran font di dalam wadah induk itu.
robabby

6
@tobik Masih dimungkinkan untuk mengurangi lompatan yang disebabkan oleh perubahan viewport dengan mengatur transisi 0,5 detik atau lebih
binaryfunt

7
coba putar telepon sekarang
cuddlecheek

1
@tobik ini sebenarnya membuatnya lebih fitur daripada bug;) pemikiran yang baik
dimitrieh

23

Saya punya masalah serupa di tajuk situs web kami.

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

Ini akan berakhir dalam pengalaman gulir yang gelisah pada android chrome, karena .header-container akan kembali skala setelah bar-url bersembunyi dan jari dihapus dari layar.

Solusi-CSS:

Menambahkan dua baris berikut, akan mencegah bahwa bar-url menyembunyikan dan pengguliran vertikal masih dimungkinkan:

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

4
Ya ini menyelesaikannya seperti yang Anda katakan, tapi itu menyebalkan bahwa nav bar selalu ditampilkan. Pada beberapa ponsel ini dapat memakan ruang layar yang sangat berharga!
Dave Clarke

1
Itu benar, untuk mencegah hal ini, Anda juga dapat menggunakan JavaScript-Workaround. Tetapi contoh ini bekerja tanpa JS sama sekali.
mat

3
Gulir dinonaktifkan sepenuhnya ketika saya mencoba solusi ini.
Nithin Baby

1
Terima kasih, itu berhasil untuk situasi saya! Harus disebutkan untuk orang lain yang mungkin melewatkannya bahwa html dan tag tubuh harus disetel ke ketinggian 100% agar bisa berfungsi (awalnya saya hanya membaca sepintas lalu jawaban Anda dan melompat ke penyebutan pertama "solusi").
gburning

-webkit-overflow-scrolling tidak boleh digunakan di lokasi produksi. developer.mozilla.org/en-US/docs/Web/CSS/…
Fredrik Westerlund

16

Masalahnya dapat diselesaikan dengan kueri media dan beberapa matematika. Inilah solusi untuk orientasi portait:

@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%);
}

Karena vh akan berubah ketika bilah url menghilang, Anda harus menentukan ketinggian dengan cara lain. Untungnya, lebar viewport konstan dan perangkat seluler hanya memiliki beberapa rasio aspek yang berbeda; jika Anda dapat menentukan lebar dan rasio aspek, sedikit matematika akan memberi Anda ketinggian viewport persis seperti yang seharusnya bekerja. Inilah prosesnya

1) Buat serangkaian kueri media untuk rasio aspek yang ingin Anda targetkan.

  • gunakan rasio aspek-perangkat alih-alih rasio aspek karena yang terakhir akan mengubah ukuran ketika bilah url menghilang

  • Saya menambahkan 'max' ke rasio aspek-perangkat untuk menargetkan setiap rasio aspek yang terjadi di antara yang paling populer. Mereka tidak akan setepat itu, tetapi mereka hanya akan untuk sebagian kecil pengguna dan masih akan cukup dekat dengan vh yang tepat.

  • ingat kueri media menggunakan horisontal / vertikal, jadi untuk portait Anda perlu membalik angka

2) untuk setiap kueri media, gandakan persentase tinggi vertikal apa pun yang Anda inginkan elemen di dalam dengan kebalikan dari rasio aspek.

  • Karena Anda tahu lebar dan rasio lebar ke tinggi, Anda hanya mengalikan% yang Anda inginkan (100% dalam kasus Anda) dengan rasio tinggi / lebar.

3) Anda harus menentukan tinggi bar url, dan kemudian minusnya dari ketinggian. Saya belum menemukan pengukuran yang tepat, tetapi saya menggunakan 9% untuk perangkat seluler dalam lanskap dan itu tampaknya bekerja cukup baik.

Ini bukan solusi yang sangat elegan, tetapi opsi lain juga tidak terlalu bagus, mengingat mereka adalah:

  • Membuat situs web Anda terlihat bermasalah bagi pengguna,

  • memiliki elemen berukuran tidak tepat, atau

  • Menggunakan javascript untuk beberapa gaya dasar ,

Kekurangannya adalah beberapa perangkat mungkin memiliki ketinggian url bar berbeda atau rasio aspek dari yang paling populer. Namun, menggunakan metode ini jika hanya sejumlah kecil perangkat mengalami penambahan / pengurangan beberapa piksel, yang tampaknya jauh lebih baik bagi saya daripada semua orang yang memiliki ukuran situs web ketika menggesek.

Untuk membuatnya lebih mudah, saya juga membuat mixin SASS:

@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%);
  }
}

2
Sangat kreatif! Bukan penggemar menebak 9% sekalipun.
w00t

1
Sangat sederhana dan pintar! Anda dapat menambahkan parameter ke vh-fix untuk mensimulasikan perilaku asli: @mixin vh-fix($vh: 100)=>height: calc(100vw * (1.333 * $vh / 100) - 9%)
mjsarfatti

1
Yang di atas seharusnya:height: calc(100vw * (1.333 * #{$vh} / 100) - 9%)
mjsarfatti

Untuk kasus penggunaan saya, ini bekerja dengan sangat baik, dan bahkan lebih baik setelah saya menghapus -9%.
Ben Fleming

12

Semua jawaban di sini menggunakan windowtinggi, yang dipengaruhi oleh bilah URL. Apakah semua orang lupa tentang screenketinggian?

Inilah solusi jQuery saya:

$(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);
  }
});

Menambahkan .css()bagian adalah mengubah elemen posisi absolut tak terhindarkan atas atas ke bawah, sehingga tidak ada lompatan sama sekali. Meskipun, saya kira tidak ada alasan untuk tidak langsung menambahkannya ke CSS normal.

Kami membutuhkan sniffer agen pengguna karena ketinggian layar di desktop tidak akan membantu.

Juga, ini semua mengasumsikan #backgroundadalah elemen posisi tetap mengisi jendela.

Untuk pemurni JavaScript (peringatan - belum teruji):

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: Maaf ini tidak langsung menjawab masalah spesifik Anda dengan lebih dari satu latar belakang. Tapi ini adalah salah satu hasil pertama ketika mencari masalah latar belakang tetap melompat di ponsel.


2
Saya mencoba jutaan jawaban ini dan sejauh ini yang terbaik. Saya awalnya mencoba menggunakan ini hanya pada <body> karena latar belakangnya. Menggunakan div untuk membungkus seluruh halaman menyebabkan masalah lain. Menggunakan div kosong dengan z-index: -1 sebagai latar belakang tampaknya menjadi solusi terbaik yang dikombinasikan dengan yang di atas. Saya mengambil deteksi seluler karena melakukan ini di desktop tidak ada salahnya untuk situs saya. Tidak ada matematika (yang bisa menebak ukuran tab salah), tidak ada penangan yang diperlukan untuk mengubah ukuran. Latar belakang hanya seluruh layar, berlabuh ke bawah. Selesai Suka!
Evan Langlois

9

Saya mengalami masalah ini juga ketika saya mencoba untuk membuat layar masuk yang akan menutupi seluruh viewport. Sayangnya, jawaban yang diterima tidak lagi berfungsi.

1) Elemen dengan ketinggian yang disetel untuk 100vhdiubah ukurannya setiap kali ukuran viewport berubah, termasuk kasus-kasus ketika itu disebabkan oleh (dis) muncul bilah URL.

2) $(window).height()mengembalikan nilai juga dipengaruhi oleh ukuran bilah URL.

Salah satu solusinya adalah "membekukan" elemen menggunakan transition: height 999999sseperti yang disarankan dalam jawaban oleh AlexKempton . Kerugiannya adalah ini secara efektif menonaktifkan adaptasi untuk semua perubahan ukuran viewport, termasuk yang disebabkan oleh rotasi layar.

Jadi solusi saya adalah mengelola perubahan viewport secara manual menggunakan JavaScript. Itu memungkinkan saya untuk mengabaikan perubahan kecil yang kemungkinan disebabkan oleh bilah URL dan hanya bereaksi pada yang besar.

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: Saya benar-benar menggunakan teknik ini bersama dengan height: 100vh. Halaman ini ditampilkan dengan benar dari awal dan kemudian javascript menendang dan mulai mengelola ketinggian secara manual. Dengan cara ini tidak ada berkedip sama sekali saat halaman sedang memuat (atau bahkan sesudahnya).


1
Saya telah menggunakan sesuatu yang serupa, tetapi daripada mengatur height: 100vhdalam CSS awal, saya mengatur min-height:100vhdan kemudian pada ukuran jendela saya menghitung min-heightdan mengaturnya ke ketinggian view-port. Ini berguna ketika situs Anda dilihat pada layar kecil dan konten terlalu besar untuk muat di viewport. SetTimeout debounce / throttle pada acara pengubahan ukuran membantu meningkatkan kinerja pada beberapa browser (pengubahan ukuran cenderung sering terjadi)
Troy Morehouse

Saya berpikir bahwa pada titik tertentu saya juga mencoba menggunakan min-heighttetapi kemudian saya mengalami masalah ketika saya perlu memusatkan konten batin secara vertikal. Entah bagaimana pemusatan vertikal bisa menjadi rumit ketika elemen luar telah heightdiatur ke auto. Jadi saya datang dengan ketinggian minimum tetap yang seharusnya cukup untuk memuat segala jenis konten yang mungkin dan mengaturnya di CSS awal. Karena min-heightmemiliki prioritas lebih tinggi daripada height, itu berfungsi dengan cukup baik.
tobik

Ah ya, saya punya masalah yang sama, tetapi memperbaikinya dengan mengubah jumbotron ke display: tabledan kemudian mengatur wadah internal display: table-celldengan vertical-align: middle. Bekerja seperti pesona.
Troy Morehouse

Betulkah? Karena saya mencoba pendekatan yang sama tetapi saya gagal. Saya tidak begitu ingat apa masalahnya tetapi ini mungkin relevan: stackoverflow.com/questions/7790222/…
tobik

Pastikan Anda menghindari persentase padding atau margin. Menyebabkan beberapa masalah rendering aneh pada IE8, meskipun browser modern baik-baik saja.
Troy Morehouse

8

Solusi Saat ini saya menggunakan adalah untuk memeriksa userAgentdi $(document).readyuntuk melihat apakah itu salah satu browser menyinggung. Jika ya, ikuti langkah-langkah ini:

  1. Atur ketinggian yang relevan ke ketinggian viewport saat ini daripada '100%'
  2. Menyimpan nilai horizontal viewport saat ini
  3. Kemudian, aktif $(window).resize, hanya perbarui nilai ketinggian yang relevan jika dimensi viewport horizontal baru berbeda dari nilai awalnya
  4. Simpan nilai horisontal & vertikal baru

Secara opsional, Anda juga dapat menguji izin untuk mengubah ukuran vertikal hanya ketika mereka melampaui ketinggian bilah alamat.

Oh, dan bilah alamat tidak memengaruhi $(window).height. Lihat: bilah alamat browser Webkit Mobile (chrome) mengubah $ (window) .height (); membuat ukuran latar belakang: tutup kembali skala setiap kali JS "Window" lebar-tinggi vs "layar" lebar-tinggi?


Saya belum mencoba ini tetapi apakah poin pertama Anda tidak berfungsi untuk iOS? ( thatemil.com/blog/2013/06/13/… )
Dave Clarke

Saya memperbaiki nilai dia di langkah pertama, tapi saya terkejut Anda menemukan jawaban Jason untuk menyelesaikan masalah. Seperti yang saya temukan, bersama dengan pengguna lain dalam pertanyaan sebelumnya yang saya tautkan, bahwa nilai metode $ (window) .height () TIDAK berubah ketika bilah alamat di chrome di android adalah atau tidak terlihat. Saya mengumpulkan situs kecil ini yang hanya mengungkapkan $ (window) .height () menghasilkan peringatan, dan itu pasti memberikan nilai yang berbeda pada nexus 4 saya di chrome ketika address bar / tidak terlihat: stormy-meadow-5908 .herokuapp.com
mp

Ini 100% memperbaiki masalah pada perangkat Android saya meskipun saya melihat masalah serupa di iPad saya yang sepertinya tidak diperbaiki yang masih saya cari.
Dave Clarke

Apakah Anda dapat memberikan beberapa kode untuk solusi Anda dan saya akan mencobanya?
Dave Clarke

4

Saya menemukan solusi yang sangat mudah tanpa menggunakan Javascript:

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

Yang dilakukan adalah menunda gerakan sehingga sangat lambat sehingga tidak terlihat.


@ Tyguy7 Ia bekerja baik setiap kali tinggi badan Anda tidak diatur ke nilai tetap, yaitu 100%, 100vh. IE8 adalah satu-satunya browser utama yang tidak mendukung transisi.
Pav Sidhu

Solusi hebat dan sederhana!
zdarsky.peter

3
Ini berfungsi dengan baik sampai Anda berada di perangkat di mana Anda dapat mengubah dari potret ke lanskap. Ketika ini terjadi, desainnya hancur.
Nagy Nick

@NagyNick itu bukan masalah besar bagi saya. Anda dapat mendeteksi perubahan orientasi dalam Javascript dan menyesuaikan gambar latar belakang.
Pav Sidhu

3

Solusi saya melibatkan sedikit javascript. Simpan 100% atau 100vh pada div (ini akan menghindari div tidak muncul pada pemuatan halaman awal). Kemudian ketika halaman dimuat, ambil tinggi jendela dan terapkan pada elemen yang dimaksud. Hindari lompatan karena sekarang Anda memiliki ketinggian statis pada div Anda.

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

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

3

Saya membuat solusi javascript vanilla untuk menggunakan unit VH. Menggunakan VH hampir di mana saja dipengaruhi oleh address bar yang meminimalkan scroll. Untuk memperbaiki jank yang menunjukkan kapan halaman digambar ulang, saya punya js ini di sini yang akan mengambil semua elemen Anda menggunakan unit VH (jika Anda memberi mereka kelas .vh-fix), dan memberi mereka ketinggian pixel inline. Pada dasarnya membekukan mereka pada ketinggian yang kita inginkan. Anda bisa melakukan ini secara rotasi atau mengubah ukuran viewport agar tetap responsif.

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'
  }
}

Ini telah menyelesaikan semua kasus penggunaan saya, semoga membantu.


3

ini solusi saya untuk mengatasi masalah ini, saya telah menambahkan komentar langsung pada kode. Saya telah menguji solusi ini dan berfungsi dengan baik. Semoga kita akan bermanfaat karena setiap orang memiliki masalah yang sama.

//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
  }); 
};

1
Anda memanggil setHeight () di dalam Metode changeHeight jika kueri cocok dan juga jika tidak cocok. Jadi hapus saja pernyataan if karena itu tidak perlu.
Dennis Meissner

2

Ini adalah solusi terbaik (paling sederhana) di atas semua yang saya coba.

... Dan ini tidak menyimpan pengalaman asli bilah alamat !

Anda dapat mengatur ketinggian dengan CSS menjadi 100% misalnya, dan kemudian mengatur ketinggian ke 0,9 * tinggi jendela dalam px dengan javascript, ketika dokumen dimuat.

Misalnya dengan jQuery:

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

)

Sayangnya tidak ada apa pun yang bekerja dengan CSS murni: P tetapi juga minfull itu vhdan vwbuggy di iPhone - gunakan persentase.


1

Saya mengatur elemen lebar saya, dengan javascript. Setelah saya mengatur de vh.

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");

Ini bekerja untuk saya. Saya tidak menggunakan jquery dll. karena saya ingin memuat secepat mungkin.


1

Butuh beberapa jam untuk memahami semua detail masalah ini dan mencari tahu penerapan terbaiknya. Ternyata per April 2016 hanya iOS Chrome yang memiliki masalah ini. Saya mencoba di Android Chrome dan iOS Safari - keduanya baik-baik saja tanpa perbaikan ini. Jadi perbaikan untuk iOS Chrome yang saya gunakan adalah:

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

1

Jawaban sederhana jika latar belakang Anda memungkinkan, mengapa tidak mengatur ukuran latar belakang: untuk sesuatu yang hanya menutupi lebar perangkat dengan kueri media dan gunakan di samping: setelah posisi: tetap; retas di sini .

IE: ukuran latar: 901px; untuk layar apa saja <900px? Tidak sempurna atau responsif tetapi berhasil membuat saya tertarik pada ponsel <480px karena saya menggunakan BG abstrak.


0

Saya menggunakan solusi ini: Perbaiki tinggi bg1 pada pemuatan halaman dengan:

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

Kemudian lampirkan pendengar acara ukuran ke Window yang melakukan ini: jika perbedaan ketinggian setelah mengubah ukuran kurang dari 60px (apa pun lebih dari tinggi url bar) maka jangan lakukan apa pun dan jika lebih besar dari 60px maka atur tinggi bg1 lagi ke tinggi induknya! kode lengkap:

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;
    }
}

PS: Bug ini sangat menjengkelkan!


0

Mirip dengan jawaban @AlexKempton. (tidak bisa berkomentar maaf)

Saya telah menggunakan penundaan transisi yang lama untuk mencegah pengubahan ukuran elemen.

misalnya:

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

Pengorbanannya adalah ini mencegah perubahan ukuran elemen termasuk pada perputaran perangkat, namun, Anda dapat menggunakan beberapa JS untuk mendeteksi orientationchangedan mengatur ulang ketinggian jika ini merupakan masalah.


0

Bagi mereka yang ingin mendengarkan ketinggian bagian dalam aktual dan gulir vertikal jendela saat browser seluler Chrome mentransisikan bilah URL dari yang ditampilkan ke tersembunyi dan sebaliknya, satu-satunya solusi yang saya temukan adalah mengatur fungsi interval, dan mengukur perbedaan window.innerHeightdengan nilai sebelumnya.

Ini memperkenalkan kode ini:

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);

Saya harap ini berguna. Adakah yang tahu solusi yang lebih baik?


0

Solusi yang saya temukan ketika mengalami masalah serupa adalah mengatur ketinggian elemen window.innerHeightsetiap kali touchmoveperistiwa dipecat.

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);
    }
});

Hal ini membuat rentang elemen tepat 100% dari layar yang tersedia setiap saat, tidak lebih dan tidak kurang. Bahkan selama bilah alamat bersembunyi atau ditampilkan.

Namun sayang sekali kita harus menemukan tambalan semacam itu, di mana cara sederhana position: fixedseharusnya berhasil.


0

Dengan dukungan properti khusus CSS (variabel) di iOS, Anda dapat mengatur ini dengan JS dan menggunakannya hanya di iOS.

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);
        }
    }
}

0

Jawaban saya adalah untuk semua orang yang datang ke sini (seperti yang saya lakukan) untuk menemukan jawaban untuk bug yang disebabkan oleh antarmuka persembunyian bare / browser.

Bilah alamat penyembunyian menyebabkan peristiwa pengubahan ukuran memicu. Tetapi berbeda dari peristiwa pengubahan ukuran lainnya, seperti beralih ke mode lansekap, ini tidak mengubah lebar jendela. Jadi solusi saya adalah untuk menghubungkan ke acara pengubahan ukuran dan memeriksa apakah lebarnya sama.

// 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
    // ...
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.