Tôi có một vấn đề rất kỳ lạ ... trong mọi trình duyệt và phiên bản di động tôi gặp phải hành vi này:

• tất cả các trình duyệt đều có menu trên cùng khi bạn tải trang (ví dụ hiển thị thanh địa chỉ) sẽ trượt lên khi bạn bắt đầu cuộn trang.
• 100vh đôi khi chỉ được tính trên phần hiển thị của chế độ xem, do đó, khi thanh trình duyệt trượt lên 100vh sẽ tăng (tính theo pixel)
• tất cả bố cục sơn lại và điều chỉnh lại vì kích thước đã thay đổi
• một hiệu ứng tăng vọt xấu cho trải nghiệm người dùng

Làm thế nào có thể tránh được vấn đề này? Khi tôi lần đầu tiên nghe về viewport-height, tôi đã rất hào hứng và tôi nghĩ rằng tôi có thể sử dụng nó cho các khối chiều cao cố định thay vì sử dụng javascript, nhưng bây giờ tôi nghĩ cách duy nhất để làm điều đó là trên thực tế javascript với một số sự kiện thay đổi kích thước ...

bạn có thể thấy vấn đề tại: trang web mẫu

Bất cứ ai có thể giúp tôi với / đề xuất một giải pháp CSS?

mã kiểm tra đơn giản:

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{
  height:100%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

<div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
    <br>
    <!-- this input highlight if resize event is fired -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
  </div></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Thật không may, đây là sự cố ý

Đây là một vấn đề được biết rõ (ít nhất là trong safari mobile), có chủ ý, vì nó ngăn ngừa các vấn đề khác. Benjamin Poulain đã trả lời một lỗi webkit :

Điều này là hoàn toàn có chủ ý. Chúng tôi đã mất khá nhiều công sức để đạt được hiệu quả này. :)

Vấn đề cơ bản là đây: vùng nhìn thấy thay đổi linh hoạt khi bạn cuộn. Nếu chúng tôi cập nhật chiều cao khung nhìn CSS phù hợp, chúng tôi cần cập nhật bố cục trong quá trình cuộn. Không chỉ có vẻ như shit, nhưng làm điều đó ở 60 FPS thực tế là không thể trong hầu hết các trang (60 FPS là tốc độ khung hình cơ bản trên iOS).

Thật khó để cho bạn thấy các phần mềm trông giống như phần shit, nhưng hãy tưởng tượng khi bạn cuộn, nội dung di chuyển và những gì bạn muốn trên màn hình đang thay đổi liên tục.

Tự động cập nhật chiều cao không hoạt động, chúng tôi có một số lựa chọn: thả đơn vị chế độ xem trên iOS, khớp với kích thước tài liệu như trước iOS 8, sử dụng kích thước chế độ xem nhỏ, sử dụng kích thước chế độ xem lớn.

Từ dữ liệu chúng tôi có, sử dụng kích thước khung nhìn lớn hơn là sự thỏa hiệp tốt nhất. Hầu hết các trang web sử dụng các đơn vị viewport hầu hết đều trông tuyệt vời.

Nicolas Hoizey đã nghiên cứu vấn đề này khá nhiều: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile -browsers.html

Không có kế hoạch sửa chữa

Tại thời điểm này, bạn không thể làm gì nhiều ngoài việc không sử dụng chiều cao khung nhìn trên thiết bị di động. Chrome cũng đã thay đổi điều này vào năm 2016:

• https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BK0oHURgmJ4
• https://developers.google.com/web/updates/2016/12/url-bar-resizing

Bạn có thể thử min-height: -webkit-fill-available;trong css của bạn thay vì 100vh. Nó sẽ được giải quyết

trong ứng dụng của tôi, tôi làm như vậy (bản thảo và postcss lồng nhau, vì vậy thay đổi mã cho phù hợp):

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

trong css của bạn:

:root {
   --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;

    @media not all and (hover:hover) {
        height: var(--app-height);
    }
}

Nó hoạt động ít nhất trên chrome mobile và ipad. Điều không hiệu quả là khi bạn thêm ứng dụng của mình vào màn hình chính trên iOS và thay đổi hướng một vài lần - bằng cách nào đó, mức thu phóng gây rối với giá trị bên trong, tôi có thể đăng cập nhật nếu tôi tìm thấy giải pháp cho nó.

Bản giới thiệu

Đối với nhiều trang web tôi xây dựng, khách hàng sẽ yêu cầu biểu ngữ 100vh và giống như bạn đã tìm thấy, điều đó dẫn đến trải nghiệm "nhảy" xấu trên thiết bị di động khi bạn bắt đầu cuộn. Đây là cách tôi giải quyết vấn đề để có trải nghiệm nhất quán mượt mà trên tất cả các thiết bị:

Trước tiên tôi đặt CSS thành phần banner của tôi thành height:100vh

Sau đó, tôi sử dụng jQuery để lấy chiều cao bằng pixel của thành phần biểu ngữ của mình và áp dụng kiểu nội tuyến bằng chiều cao này.

var viewportHeight = $('.banner').outerHeight();
$('.banner').css({ height: viewportHeight });

Làm điều này giải quyết vấn đề trên thiết bị di động như khi tải trang, phần tử biểu ngữ được đặt thành 100vh bằng CSS và sau đó jQuery ghi đè điều này bằng cách đặt CSS nội tuyến vào phần tử biểu ngữ của tôi để ngăn nó thay đổi kích thước khi người dùng bắt đầu cuộn.

Tuy nhiên, trên máy tính để bàn nếu người dùng thay đổi kích thước cửa sổ trình duyệt của họ, phần tử biểu ngữ của tôi sẽ không thay đổi kích thước vì giờ đây nó có chiều cao cố định được đặt bằng pixel do jQuery ở trên. Để giải quyết vấn đề này, tôi sử dụng Phát hiện di động để thêm lớp 'di động' vào phần thân tài liệu của mình. Và sau đó tôi gói jQuery ở trên trong một câu lệnh if:

if ($('body').hasClass('mobile')) {
  var viewportHeight = $('.banner').outerHeight();
  $('.banner').css({ height: viewportHeight });
}

Kết quả là, nếu người dùng ở trên thiết bị di động, lớp 'mobile' sẽ xuất hiện trên thân trang của tôi và jQuery ở trên được thực thi. Vì vậy, phần tử biểu ngữ của tôi sẽ chỉ áp dụng CSS nội tuyến trên các thiết bị di động trong khi đó trên máy tính để bàn, quy tắc CSS 100vh ban đầu vẫn được giữ nguyên.

Nhìn vào câu trả lời này: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

body {
  background-color: #333;
}

.module {
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}

.module__item {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
}

.module__item:nth-child(odd) {
  background-color: #fff;
  color: #F73859;
}

.module__item:nth-child(even) {
  background-color: #F73859;
  color: #F1D08A;
}

<div class="module">
  <div class="module__item">20%</div>
  <div class="module__item">40%</div>
  <div class="module__item">60%</div>
  <div class="module__item">80%</div>
  <div class="module__item">100%</div>
</div>

Tôi đã đưa ra một thành phần React - kiểm tra xem nếu bạn sử dụng React hoặc duyệt mã nguồn nếu bạn không, để bạn có thể điều chỉnh nó phù hợp với môi trường của bạn.

Nó đặt chiều cao của div toàn màn hình window.innerHeightvà sau đó cập nhật nó trên cửa sổ thay đổi kích thước.

Khi tôi đang tìm kiếm một giải pháp vài ngày, đây là của tôi cho mọi người sử dụng VueJS với Vuetify (giải pháp của tôi sử dụng v-app-bar, v-navigation-ngăn kéo và v-footer): Tôi đã tạo App.scss (được sử dụng trong Ứng dụng. vue) với nội dung sau:

.v-application {
    height: 100vh;
    height: -webkit-fill-available;
}

.v-application--wrap {
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
}

Đối với tôi thủ thuật như vậy đã tạo ra một công việc:

height: calc(100vh - calc(100vh - 100%))

@nils giải thích rõ ràng.

Sau đó là gì?

Tôi vừa quay lại sử dụng 'cổ điển' %(phần trăm) trong CSS.

Thường phải nỗ lực nhiều hơn để thực hiện một cái gì đó hơn là nó sẽ sử dụng vh, nhưng ít nhất, bạn có một giải pháp khá ổn định, hoạt động trên các thiết bị và trình duyệt khác nhau mà không gặp sự cố giao diện người dùng lạ.

Tôi vừa tìm thấy một ứng dụng web do tôi thiết kế có vấn đề này với iPhone và iPad và tìm thấy một bài viết gợi ý để giải quyết nó bằng các truy vấn phương tiện nhắm vào các thiết bị cụ thể của Apple.

Tôi không biết liệu tôi có thể chia sẻ mã từ bài viết đó ở đây không, nhưng địa chỉ là đây: http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-orms

Trích dẫn bài viết: "chỉ cần khớp chiều cao phần tử với chiều cao thiết bị bằng các truy vấn phương tiện nhắm mục tiêu các phiên bản cũ hơn của độ phân giải iPhone và iPad."

Họ đã thêm chỉ 6 truy vấn phương tiện để điều chỉnh các yếu tố chiều cao đầy đủ và nó sẽ hoạt động vì nó được CSS thực hiện đầy đủ.

Chỉnh sửa đang chờ xử lý: Tôi không thể kiểm tra nó ngay bây giờ, nhưng tôi sẽ quay lại và báo cáo kết quả của mình.

Khi tôi là người mới, tôi không thể nhận xét về các câu trả lời khác.

Nếu ai đó đang tìm kiếm một câu trả lời để làm cho công việc này (và có thể sử dụng javascript - vì dường như bắt buộc phải thực hiện công việc này vào lúc này) thì phương pháp này đã hoạt động khá tốt đối với tôi và nó cũng thay đổi định hướng di động. Tôi sử dụng Jquery cho mã ví dụ nhưng có thể thực hiện được với vanillaJS.

-Đầu tiên, tôi sử dụng tập lệnh để phát hiện xem thiết bị có chạm hay di chuột không. Ví dụ xương trần:

if ("ontouchstart" in document.documentElement) {
    document.body.classList.add('touch-device');

} else {
    document.body.classList.add('hover-device');
}

Điều này thêm lớp vào thành phần cơ thể theo loại thiết bị (di chuột hoặc chạm) có thể được sử dụng sau này cho tập lệnh chiều cao.

-Tiếp theo sử dụng mã này để đặt chiều cao của thiết bị khi tải và thay đổi hướng:

if (jQuery('body').hasClass("touch-device")) {
//Loading height on touch-device
    function calcFullHeight() {
        jQuery('.hero-section').css("height", $(window).height());
    }

    (function($) {
        calcFullHeight();

        jQuery(window).on('orientationchange', function() {
            // 500ms timeout for getting the correct height after orientation change
            setTimeout(function() {
                calcFullHeight();
            }, 500);

        });
    })(jQuery);

} else {
    jQuery('.hero-section').css("height", "100vh");


}

-Thời gian được đặt để thiết bị sẽ tính toán chính xác chiều cao mới khi thay đổi hướng. Nếu không có thời gian chờ, theo kinh nghiệm của tôi, chiều cao sẽ không chính xác. 500ms có thể là một việc làm quá sức nhưng đã làm việc cho tôi.

-100vh trên thiết bị di chuột là một dự phòng nếu trình duyệt ghi đè CSS 100vh.

Đoạn mã sau đã giải quyết vấn đề (với jQuery).

var vhHeight = $("body").height();
var chromeNavbarHeight = vhHeight - window.innerHeight;
$('body').css({ height: window.innerHeight, marginTop: chromeNavbarHeight });

Và các yếu tố khác sử dụng %như một đơn vị để thay thế vh.

Đây là một công việc xung quanh tôi đã sử dụng cho ứng dụng React của mình.

iPhone 11 Pro & iPhone Pro Max - 120px

iPhone 8 - 80px

max-height: calc(100vh - 120px);

Đó là một thỏa hiệp nhưng sửa chữa tương đối đơn giản

Sau đây làm việc cho tôi:

html { height: 100vh; }

body {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
}

/* this is the container you want to take the visible viewport  */
/* make sure this is top-level in body */
#your-app-container {
  height: 100%;
}

Các bodysẽ lấy chiều cao khung nhìn có thể nhìn thấy và #your-app-containercó height: 100%sẽ làm cho thùng chứa mà lấy chiều cao khung nhìn có thể nhìn thấy.

Hy vọng, đây sẽ là biến môi trường CSS do UA xác định như được đề xuất tại đây: https://github.com/w3c/csswg-dcraft/issues/2630#issuecomment-397536046

Vì nó sẽ không được sửa, bạn có thể làm một cái gì đó như:

# html
<body>
  <div class="content">
    <!-- Your stuff here -->
  </div>
</body>

# css
.content {
  height: 80vh;
}

Đối với tôi, đó là giải pháp nhanh nhất và thuần túy hơn chơi với JavaScript không thể hoạt động trên nhiều thiết bị và trình duyệt.

Chỉ cần sử dụng giá trị vhthích hợp phù hợp với nhu cầu của bạn.

Sử dụng vh trên thiết bị di động sẽ không hoạt động với 100vh, do lựa chọn thiết kế của họ sử dụng toàn bộ chiều cao của thiết bị không bao gồm bất kỳ thanh địa chỉ, v.v.

Nếu bạn đang tìm kiếm một bố cục bao gồm chiều cao div tỷ lệ với chiều cao chế độ xem thực, tôi sử dụng giải pháp css thuần túy sau đây:

:root {
  --devHeight: 86vh; //*This value changes
}

.div{
    height: calc(var(--devHeight)*0.10); //change multiplier to suit required height
}

Bạn có hai tùy chọn để đặt chiều cao chế độ xem, đặt thủ công --devHeight thành chiều cao hoạt động (nhưng bạn sẽ cần nhập giá trị này cho từng loại thiết bị bạn đang mã hóa)

hoặc là

Sử dụng javascript để lấy chiều cao cửa sổ và sau đó cập nhật - tối ưu khi tải và làm mới chế độ xem (tuy nhiên điều này không yêu cầu sử dụng javascript và không phải là giải pháp css thuần túy)

Khi bạn có được chiều cao chế độ xem chính xác, bạn có thể tạo nhiều div với tỷ lệ phần trăm chính xác của tổng chiều cao khung nhìn bằng cách thay đổi hệ số nhân trong mỗi div bạn gán chiều cao.

0,10 = 10% chiều cao lượt xem 0,57 = 57% chiều cao lượt xem

Hy vọng điều này có thể giúp được ai đó;)

Bạn có thể làm điều này bằng cách thêm tập lệnh và kiểu sau

  function appHeight() {
    const doc = document.documentElement
    doc.style.setProperty('--vh', (window.innerHeight*.01) + 'px');
  }
  window.addEventListener('resize', appHeight);
  appHeight();

Phong cách

.module {
 height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

Hãy thử html, body { height: 100% }một cái gì đó để có hiệu lực của 100vh trên thiết bị di động.

Bạn có thể thử đưa position: fixed; top: 0; bottom: 0;tài sản cho container của bạn.