Ảnh nền nhảy khi thanh địa chỉ ẩn Chrome / Android / Mobile Chrome

Tôi hiện đang phát triển một trang web đáp ứng bằng Twitter Bootstrap.

Trang web có hình nền toàn màn hình trên thiết bị di động / máy tính bảng / máy tính để bàn. Những hình ảnh này xoay và mờ dần qua từng cái, sử dụng hai div.

Nó gần như hoàn hảo, ngoại trừ một vấn đề. Sử dụng iOS Safari, Trình duyệt Android hoặc Chrome trên Android, nền nhảy nhẹ khi người dùng cuộn xuống trang và khiến thanh địa chỉ bị ẩn.

Trang web ở đây: http://lt2.daveclarke.me/

Truy cập nó trên một thiết bị di động và cuộn xuống và bạn sẽ thấy hình ảnh thay đổi kích thước / di chuyển.

Mã tôi đang sử dụng cho nền DIV như sau:

#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ất cả các đề xuất đều được chào đón - điều này đã được thực hiện trong một thời gian !!

Sự cố này xảy ra do các thanh URL co lại / trượt ra khỏi đường và thay đổi kích thước của các div # bg1 và # bg2 vì chúng có chiều cao 100% và "cố định". Vì hình nền được đặt thành "che", nó sẽ điều chỉnh kích thước / vị trí hình ảnh vì diện tích chứa lớn hơn.

Dựa trên tính chất đáp ứng của trang web, nền phải mở rộng. Tôi giải trí hai giải pháp có thể:

1) Đặt chiều cao # bg1, # bg2 thành 100vh. Về lý thuyết, đây là một giải pháp tao nhã. Tuy nhiên, iOS có lỗi vh ( http://thatemil.com/blog/2013/06/13/viewport-relative-unit-stranguity-in-ios-6/ ). Tôi đã cố gắng sử dụng chiều cao tối đa để ngăn chặn sự cố, nhưng nó vẫn còn.

2) Kích thước khung nhìn, khi được xác định bởi Javascript, không bị ảnh hưởng bởi thanh URL. Do đó, Javascript có thể được sử dụng để đặt chiều cao tĩnh trên # bg1 và # bg2 dựa trên kích thước khung nhìn. Đây không phải là giải pháp tốt nhất vì nó không phải là CSS thuần túy và có một bước nhảy hình ảnh nhẹ khi tải trang. Tuy nhiên, đó là giải pháp khả thi duy nhất tôi thấy khi xem xét các lỗi "vh" của iOS (dường như không được sửa trong iOS 7).

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

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

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

Bên cạnh đó, tôi đã thấy rất nhiều vấn đề với các thanh URL thay đổi kích thước này trong iOS và Android. Tôi hiểu mục đích, nhưng họ thực sự cần phải suy nghĩ thông qua chức năng lạ và sự tàn phá mà họ mang đến cho các trang web. Thay đổi mới nhất là bạn không còn có thể "ẩn" thanh URL khi tải trang trên iOS hoặc Chrome bằng các thủ thuật cuộn.

EDIT: Mặc dù đoạn script trên hoạt động hoàn hảo để giữ cho nền không bị thay đổi kích thước, nhưng nó gây ra một khoảng cách đáng chú ý khi người dùng cuộn xuống. Điều này là do nó giữ cho kích thước nền đến 100% chiều cao màn hình trừ đi thanh URL. Nếu chúng ta thêm 60px vào chiều cao, như swiss gợi ý, vấn đề này sẽ biến mất. Điều đó không có nghĩa là chúng ta không được nhìn thấy 60px dưới cùng của hình nền khi có thanh URL, nhưng điều đó ngăn người dùng không bao giờ nhìn thấy một khoảng trống.

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

Tôi thấy rằng câu trả lời của Jason không phù hợp với tôi và tôi vẫn đang nhảy. Javascript đảm bảo không có khoảng trống ở đầu trang nhưng nền vẫn nhảy bất cứ khi nào thanh địa chỉ biến mất / xuất hiện lại. Vì vậy, cũng như sửa lỗi Javascript, tôi đã áp dụng transition: height 999999scho div. Điều này tạo ra một quá trình chuyển đổi với thời lượng dài đến mức nó gần như đóng băng phần tử.

Tôi đã có một vấn đề tương tự trên một tiêu đề của trang web của chúng tôi.

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

Điều này sẽ kết thúc trong trải nghiệm cuộn nhanh trên chrome chrome, bởi vì .header-container sẽ bán lại sau khi thanh url ẩn và ngón tay bị xóa khỏi màn hình.

Giải pháp CSS:

Thêm hai dòng sau, sẽ ngăn chặn thanh url ẩn và cuộn dọc vẫn có thể:

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

Vấn đề có thể được giải quyết với một truy vấn phương tiện và một số toán học. Đây là một giải pháp cho định hướng chân dung:

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

Vì vh sẽ thay đổi khi thanh url biến mất, bạn cần xác định chiều cao theo cách khác. Rất may, chiều rộng của khung nhìn là không đổi và các thiết bị di động chỉ có một vài tỷ lệ khung hình khác nhau; nếu bạn có thể xác định chiều rộng và tỷ lệ khung hình, một phép toán nhỏ sẽ cung cấp cho bạn chiều cao khung nhìn chính xác như vh sẽ hoạt động. Đây là quá trình

1) Tạo một loạt các truy vấn phương tiện cho tỷ lệ khung hình bạn muốn nhắm mục tiêu.

• sử dụng tỷ lệ khung hình của thiết bị thay vì tỷ lệ khung hình vì cái sau sẽ thay đổi kích thước khi thanh url biến mất

• Tôi đã thêm 'tối đa' vào tỷ lệ khung hình của thiết bị để nhắm mục tiêu bất kỳ tỷ lệ khung hình nào xảy ra theo giữa mức phổ biến nhất. Họ sẽ không chính xác như vậy, nhưng họ sẽ chỉ dành cho một số ít người dùng và vẫn sẽ khá gần với vh thích hợp.

• nhớ truy vấn phương tiện bằng cách sử dụng ngang / dọc, vì vậy, đối với portait, bạn cần phải lật các số

2) cho mỗi truy vấn phương tiện nhân với bất kỳ tỷ lệ phần trăm chiều cao dọc nào bạn muốn phần tử nằm trong vw bằng tỷ lệ ngược của tỷ lệ khung hình.

• Vì bạn biết chiều rộng và tỷ lệ giữa chiều rộng và chiều cao, bạn chỉ cần nhân% bạn muốn (100% trong trường hợp của bạn) với tỷ lệ chiều cao / chiều rộng.

3) Bạn phải xác định chiều cao của thanh url và sau đó trừ chiều cao của thanh url. Tôi chưa tìm thấy các phép đo chính xác, nhưng tôi sử dụng 9% cho các thiết bị di động ở chế độ ngang và điều đó dường như hoạt động khá tốt.

Đây không phải là một giải pháp rất thanh lịch, nhưng các tùy chọn khác cũng không tốt lắm, vì chúng là:

• Có trang web của bạn có vẻ có lỗi với người dùng,

• có các yếu tố kích thước không phù hợp, hoặc

• Sử dụng javascript cho một số kiểu dáng cơ bản ,

Hạn chế là một số thiết bị có thể có chiều cao thanh url hoặc tỷ lệ khung hình khác nhau so với phổ biến nhất. Tuy nhiên, sử dụng phương pháp này nếu chỉ một số ít thiết bị chịu sự cộng / trừ của một vài pixel, điều đó có vẻ tốt hơn đối với tôi so với mọi người có thay đổi kích thước trang web khi vuốt.

Để dễ dàng hơn, tôi cũng đã tạo một 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%);
  }
}

Tất cả các câu trả lời ở đây đang sử dụng windowchiều cao, bị ảnh hưởng bởi thanh URL. Có phải mọi người đã quên về screenchiều cao?

Đây là giải pháp jQuery của tôi:

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

Thêm .css()phần đang thay đổi phần tử vị trí tuyệt đối được sắp xếp trên cùng chắc chắn thành căn chỉnh dưới cùng, do đó không có bước nhảy nào cả. Mặc dù, tôi cho rằng không có lý do gì để không thêm nó trực tiếp vào CSS bình thường.

Chúng tôi cần tác nhân người dùng sniffer vì chiều cao màn hình trên máy tính để bàn sẽ không hữu ích.

Ngoài ra, đây là tất cả giả định #backgroundlà một yếu tố vị trí cố định lấp đầy cửa sổ.

Đối với những người theo chủ nghĩa thuần túy JavaScript (cảnh báo - chưa được kiểm tra):

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: Xin lỗi vì điều này không trực tiếp trả lời vấn đề cụ thể của bạn với nhiều hơn một nền tảng. Nhưng đây là một trong những kết quả đầu tiên khi tìm kiếm vấn đề về nền cố định nhảy trên di động.

Tôi cũng gặp phải vấn đề này khi tôi đang cố gắng tạo một màn hình lối vào bao quát toàn bộ khung nhìn. Thật không may, câu trả lời được chấp nhận không còn hoạt động.

1) Các thành phần có chiều cao được đặt để 100vhthay đổi kích thước mỗi khi kích thước khung nhìn thay đổi, bao gồm cả các trường hợp khi nó bị gây ra bởi (dis) xuất hiện thanh URL.

2) $(window).height()trả về các giá trị cũng bị ảnh hưởng bởi kích thước của thanh URL.

Một giải pháp là "đóng băng" phần tử bằng cách sử dụng transition: height 999999snhư được đề xuất trong câu trả lời của AlexKempton . Nhược điểm là điều này vô hiệu hóa thích ứng với tất cả các thay đổi kích thước khung nhìn, bao gồm cả những thay đổi do xoay màn hình.

Vì vậy, giải pháp của tôi là quản lý các thay đổi chế độ xem bằng tay bằng cách sử dụng JavaScript. Điều đó cho phép tôi bỏ qua những thay đổi nhỏ có thể do thanh URL gây ra và chỉ phản ứng với những thay đổi lớn.

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: Tôi thực sự sử dụng kỹ thuật này cùng với height: 100vh. Trang được hiển thị chính xác ngay từ đầu và sau đó javascript khởi động và bắt đầu quản lý chiều cao theo cách thủ công. Bằng cách này, không có hiện tượng nhấp nháy nào trong khi trang đang tải (hoặc thậm chí sau đó).

Giải pháp Tôi hiện đang sử dụng là để kiểm tra userAgenttrên $(document).readyđể xem nếu nó là một trong những trình duyệt xúc phạm. Nếu có, hãy làm theo các bước sau:

1. Đặt độ cao có liên quan thành chiều cao của chế độ xem hiện tại thay vì '100%'
2. Lưu trữ giá trị ngang của chế độ xem hiện tại
3. Sau đó, $(window).resizechỉ cập nhật các giá trị chiều cao có liên quan nếu kích thước khung nhìn ngang mới khác với giá trị ban đầu của nó
4. Lưu trữ các giá trị ngang và dọc mới

Tùy chọn, bạn cũng có thể kiểm tra cho phép thay đổi kích thước dọc chỉ khi chúng vượt quá chiều cao của thanh địa chỉ.

Oh, và thanh địa chỉ có ảnh hưởng $(window).height. Xem: Thanh địa chỉ trình duyệt Mobile Webkit (chrome) thay đổi $ (window) .height (); làm kích thước nền: che phủ lại mỗi lần JS "Window" width-height vs "screen" width-height?

Tôi đã tìm thấy một giải pháp thực sự dễ dàng mà không cần sử dụng Javascript:

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

Tất cả điều này làm trì hoãn chuyển động để nó chậm đến mức không thể nhận ra.

Giải pháp của tôi liên quan đến một chút javascript. Giữ 100% hoặc 100vh trên div (điều này sẽ tránh div không xuất hiện khi tải trang ban đầu). Sau đó, khi trang tải, lấy chiều cao cửa sổ và áp dụng nó cho phần tử được đề cập. Tránh nhảy vì bây giờ bạn có chiều cao tĩnh trên div của bạn.

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

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

Tôi đã tạo một giải pháp javascript vanilla để sử dụng các đơn vị VH. Sử dụng VH khá nhiều ở mọi nơi được tác động bởi các thanh địa chỉ thu nhỏ khi cuộn. Để sửa lỗi jank hiển thị khi trang vẽ lại, tôi đã có js này ở đây sẽ lấy tất cả các phần tử của bạn bằng cách sử dụng các đơn vị VH (nếu bạn cung cấp cho chúng lớp .vh-fix) và cho chúng chiều cao pixel được nội tuyến. Về cơ bản đóng băng chúng ở độ cao chúng ta muốn. Bạn có thể làm điều này khi xoay hoặc thay đổi kích thước khung nhìn để duy trì phản hồi.

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

Điều này đã giải quyết tất cả các trường hợp sử dụng của tôi, hy vọng nó sẽ giúp.

Đây là giải pháp của tôi để giải quyết vấn đề này, tôi đã thêm ý kiến ​​trực tiếp về mã. Tôi đã thử nghiệm giải pháp này và hoạt động tốt. Hy vọng chúng tôi sẽ hữu ích cho mọi người có cùng một vấn đề.

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

Đây là giải pháp tốt nhất (đơn giản nhất) trên tất cả mọi thứ tôi đã thử.

... Và điều này không giữ trải nghiệm bản địa của thanh địa chỉ !

Ví dụ, bạn có thể đặt chiều cao với CSS thành 100% và sau đó đặt chiều cao thành 0,9 * chiều cao cửa sổ tính bằng px với javascript, khi tài liệu được tải.

Ví dụ với jQuery:

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

)

Thật không may, không có bất cứ thứ gì hoạt động với CSS thuần túy: P nhưng cũng rất tinh vi vhvà vwcó lỗi trên iPhone - sử dụng tỷ lệ phần trăm.

Tôi đặt phần tử chiều rộng của mình bằng javascript. Sau khi tôi đặt 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");

Điều này làm việc cho tôi. Tôi không sử dụng jquery ect. bởi vì tôi muốn nó tải ngay khi thấy rõ.

Phải mất vài giờ để hiểu tất cả các chi tiết của vấn đề này và tìm ra cách thực hiện tốt nhất. Hóa ra từ tháng 4 năm 2016 chỉ có Chrome Chrome có vấn đề này. Tôi đã thử trên Android Chrome và iOS Safari - cả hai đều ổn mà không cần sửa lỗi này. Vì vậy, cách khắc phục cho Chrome Chrome mà tôi đang sử dụng là:

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

Câu trả lời đơn giản nếu nền của bạn cho phép, tại sao không đặt kích thước nền: thành thứ gì đó chỉ che chiều rộng thiết bị bằng các truy vấn phương tiện và sử dụng cùng với: vị trí sau: đã sửa; hack đây .

IE: kích thước nền: 901px; cho bất kỳ màn hình <900px? Không hoàn hảo hoặc đáp ứng nhưng đã làm tôi say mê trên thiết bị di động <480px khi tôi đang sử dụng BG trừu tượng.

Tôi đang sử dụng cách giải quyết này: Khắc phục chiều cao của bg1 khi tải trang bằng cách:

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

Sau đó, đính kèm một trình lắng nghe sự kiện thay đổi kích thước vào Window để thực hiện điều này: nếu chênh lệch chiều cao sau khi thay đổi kích thước nhỏ hơn 60px (bất cứ thứ gì nhiều hơn chiều cao thanh url) thì không làm gì cả và nếu nó lớn hơn 60px thì hãy đặt lại chiều cao của bg1 cho chiều cao của cha mẹ! mã hoàn chỉnh:

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: Lỗi này rất khó chịu!

Tương tự như câu trả lời @AlexKempton. (không thể bình luận xin lỗi)

Tôi đã sử dụng độ trễ chuyển tiếp dài để ngăn chặn thay đổi kích thước phần tử.

ví dụ:

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

Sự cân bằng với điều này là nó ngăn chặn việc thay đổi kích thước của phần tử bao gồm cả khi xoay thiết bị, tuy nhiên, bạn có thể sử dụng một số JS để phát hiện orientationchangevà đặt lại độ cao nếu đây là một vấn đề.

Đối với những người muốn nghe chiều cao thực tế và cuộn dọc của cửa sổ trong khi trình duyệt di động Chrome đang chuyển thanh URL từ hiển thị sang ẩn và ngược lại, giải pháp duy nhất tôi tìm thấy là đặt chức năng khoảng và đo lường sự khác biệt của window.innerHeightgiá trị trước đó.

Điều này giới thiệu mã này:

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

Tôi hy vọng rằng điều này sẽ có ích. Có ai biết một giải pháp tốt hơn?

Giải pháp tôi đưa ra khi gặp vấn đề tương tự là đặt chiều cao của phần tử cho window.innerHeightmỗi lần touchmovesự kiện được kích hoạt.

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

Điều này làm cho phần tử trải dài chính xác 100% màn hình có sẵn mọi lúc, không hơn không kém. Ngay cả trong thanh địa chỉ ẩn hoặc hiển thị.

Tuy nhiên, thật đáng tiếc khi chúng ta phải đưa ra loại bản vá đó, nơi đơn giản position: fixednên hoạt động.

Với sự hỗ trợ của các thuộc tính tùy chỉnh CSS (các biến) trong iOS, bạn có thể thiết lập các thuộc tính này với JS và chỉ sử dụng chúng trên 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);
        }
    }
}

Câu trả lời của tôi là dành cho tất cả những người đến đây (như tôi đã làm) để tìm câu trả lời cho lỗi do địa chỉ ẩn / giao diện trình duyệt ẩn.

Thanh địa chỉ ẩn gây ra sự kiện thay đổi kích thước để kích hoạt. Nhưng khác với các sự kiện thay đổi kích thước khác, như chuyển sang chế độ ngang, điều này không làm thay đổi độ rộng của cửa sổ. Vì vậy, giải pháp của tôi là nối vào sự kiện thay đổi kích thước và kiểm tra xem chiều rộng có giống nhau không.

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