ฉันมีปัญหาแปลก ๆ ... ในทุกเบราว์เซอร์และเวอร์ชันมือถือฉันพบปัญหานี้:

• เบราว์เซอร์ทั้งหมดมีเมนูด้านบนเมื่อคุณโหลดหน้าเว็บ (แสดงแถบที่อยู่เป็นต้น) ซึ่งจะเลื่อนขึ้นเมื่อคุณเริ่มเลื่อนหน้า
• บางครั้งจะคำนวณ100vh เฉพาะในส่วนที่มองเห็นได้ของวิวพอร์ตดังนั้นเมื่อแถบเบราว์เซอร์เลื่อนขึ้น 100vh จะเพิ่มขึ้น (ในรูปของพิกเซล)
• เลย์เอาต์ทั้งหมดทาสีใหม่และปรับใหม่เนื่องจากขนาดมีการเปลี่ยนแปลง
• เอฟเฟ็กต์ที่แย่มากสำหรับประสบการณ์ของผู้ใช้

จะหลีกเลี่ยงปัญหานี้ได้อย่างไร? ตอนที่ฉันได้ยิน viewport-height ครั้งแรกฉันรู้สึกตื่นเต้นและฉันคิดว่าฉันสามารถใช้มันสำหรับบล็อกความสูงคงที่แทนที่จะใช้ javascript แต่ตอนนี้ฉันคิดว่าวิธีเดียวที่ทำได้คือ javascript ที่มีการปรับขนาดบางอย่าง ...

คุณสามารถดูปัญหาได้ที่: ไซต์ตัวอย่าง

ใครสามารถช่วยฉันด้วย / แนะนำวิธีแก้ปัญหา CSS?

รหัสทดสอบง่าย ๆ :

/* 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>

น่าเสียดายที่นี่เป็นเจตนา ...

นี่เป็นปัญหาที่รู้กันดี (อย่างน้อยก็ในมือถือซาฟารี) ซึ่งมีเจตนาเพราะมันป้องกันปัญหาอื่น ๆ Benjamin Poulain ตอบข้อผิดพลาดของ webkit :

นี่เป็นเจตนาอย่างสมบูรณ์ มันใช้งานค่อนข้างน้อยในส่วนของเราเพื่อให้บรรลุผลนี้ :)

ปัญหาพื้นฐานคือสิ่งนี้: พื้นที่ที่มองเห็นเปลี่ยนแปลงได้แบบไดนามิกในขณะที่คุณเลื่อน หากเราอัปเดตความสูงของวิวพอร์ต CSS เราต้องอัปเดตเลย์เอาท์ในระหว่างการเลื่อน ไม่เพียง แต่ดูเหมือนว่าจะเป็นเรื่องไร้สาระ แต่การทำเช่นนั้นที่ 60 FPS นั้นเป็นไปไม่ได้ในเกือบทุกหน้า (60 FPS เป็นอัตราเฟรมพื้นฐานบน iOS)

เป็นการยากที่จะแสดงให้คุณเห็น "ส่วนที่ดูเหมือนอึ" แต่จินตนาการเมื่อคุณเลื่อนเนื้อหาเคลื่อนไหวและสิ่งที่คุณต้องการบนหน้าจอขยับอย่างต่อเนื่อง

การอัปเดตความสูงแบบไดนามิกไม่ทำงานเรามีตัวเลือกไม่กี่ตัวเลือก: วางหน่วย viewport บน iOS ให้ตรงกับขนาดเอกสารเช่นก่อนหน้า iOS 8 ใช้ขนาดมุมมองขนาดเล็กใช้ขนาดมุมมองขนาดใหญ่

จากข้อมูลที่เรามีการใช้ขนาดมุมมองที่ใหญ่กว่านั้นคือการประนีประนอมที่ดีที่สุด เว็บไซต์ส่วนใหญ่ที่ใช้หน่วยวิวพอร์ตดูดีอยู่เกือบตลอดเวลา

Nicolas Hoizey ได้ทำการวิจัยเรื่องนี้แล้ว: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile -browsers.html

ไม่มีการวางแผนการแก้ไข

ณ จุดนี้มีสิ่งที่คุณทำได้ไม่มากนักยกเว้นการใช้ความสูงวิวพอร์ตบนอุปกรณ์พกพา Chrome เปลี่ยนมาเป็นรุ่นนี้เช่นกันในปี 2016:

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

คุณสามารถลองmin-height: -webkit-fill-available;ใน CSS 100vhของคุณแทน มันควรจะแก้ไข

ในแอปของฉันฉันทำมันอย่างนั้น (typescript และ postcss ซ้อนกันดังนั้นเปลี่ยนรหัสตาม):

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

ใน CSS ของคุณ:

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

ทำงานได้อย่างน้อยบนมือถือ Chrome และ iPad สิ่งที่ใช้ไม่ได้คือเมื่อคุณเพิ่มแอพของคุณไปที่หน้าจอโฮมบน iOS และเปลี่ยนการวางแนวสองสามครั้ง - ไม่ว่าระดับการซูมจะยุ่งเหยิงกับค่าความสูงภายในฉันอาจโพสต์การอัปเดตหากฉันพบวิธีแก้ไข

การสาธิต

สำหรับเว็บไซต์หลายแห่งที่ฉันสร้างลูกค้าจะขอแบนเนอร์ 100vh และเช่นเดียวกับที่คุณพบมันส่งผลให้ประสบการณ์ "กระโดด" บนมือถือไม่ดีเมื่อคุณเริ่มเลื่อน นี่คือวิธีที่ฉันแก้ปัญหาสำหรับประสบการณ์ที่สอดคล้องกันอย่างราบรื่นในทุกอุปกรณ์:

ฉันก่อนตั้ง CSS องค์ประกอบแบนเนอร์ของฉันเป็น height:100vh

จากนั้นฉันใช้ jQuery เพื่อรับความสูงเป็นพิกเซลขององค์ประกอบแบนเนอร์ของฉันและใช้สไตล์อินไลน์โดยใช้ความสูงนี้

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

การทำเช่นนี้จะช่วยแก้ปัญหาบนอุปกรณ์พกพาเมื่อหน้าโหลดองค์ประกอบแบนเนอร์ถูกตั้งค่าเป็น 100vh โดยใช้ CSS จากนั้น jQuery จะแทนที่สิ่งนี้ด้วยการใส่ CSS แบบอินไลน์ในองค์ประกอบแบนเนอร์ของฉันซึ่งหยุดการปรับขนาดเมื่อผู้ใช้เริ่มเลื่อน

อย่างไรก็ตามบนเดสก์ท็อปหากผู้ใช้ปรับขนาดหน้าต่างเบราว์เซอร์องค์ประกอบแบนเนอร์ของฉันจะไม่ปรับขนาดเนื่องจากตอนนี้มีความสูงคงที่ตั้งค่าเป็นพิกเซลเนื่องจาก jQuery ด้านบน ในการแก้ไขปัญหานี้ฉันใช้Mobile Detectเพื่อเพิ่มคลาส 'มือถือ' ลงในเนื้อความของเอกสารของฉัน จากนั้นฉันก็ใส่ jQuery ด้านบนลงในคำสั่ง if:

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

ดังนั้นหากผู้ใช้อยู่บนอุปกรณ์มือถือคลาส 'มือถือ' จะปรากฏบนเนื้อความของหน้าของฉันและ jQuery ข้างต้นจะถูกดำเนินการ ดังนั้นองค์ประกอบแบนเนอร์ของฉันจะใช้ CSS แบบอินไลน์กับอุปกรณ์มือถือในขณะที่บนเดสก์ท็อปกฎ CSS 100vh ดั้งเดิมยังคงอยู่

ดูคำตอบนี้: 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>

ฉันมาพร้อมกับส่วนประกอบ React - ตรวจสอบว่าคุณใช้ React หรือเรียกดูซอร์สโค้ดหากคุณไม่ทำดังนั้นคุณสามารถปรับให้เข้ากับสภาพแวดล้อมของคุณได้

มันตั้งค่าความสูงของ div แบบเต็มหน้าจอเป็นwindow.innerHeightและจากนั้นปรับขนาดบนหน้าต่าง

ขณะที่ฉันกำลังมองหาวิธีแก้ปัญหาบางวันนี่เป็นของฉันสำหรับทุกคนที่ใช้ VueJS กับ Vuetify (โซลูชันของฉันใช้ v-app-bar, v-navigation-drawer และ v-footer): ฉันสร้าง App.scss (ใช้ในแอป vue) มีเนื้อหาดังต่อไปนี้:

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

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

สำหรับฉันเคล็ดลับดังกล่าวทำให้งาน:

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

@ นิลอธิบายอย่างชัดเจน

ต่อไปคืออะไร

ฉันเพิ่งกลับไปใช้ 'คลาสสิค' ญาติ%(เปอร์เซ็นต์)ใน CSS

บ่อยครั้งที่มีความพยายามในการใช้งานมากกว่าที่จะใช้vhแต่อย่างน้อยคุณก็มีวิธีแก้ปัญหาที่ค่อนข้างเสถียรซึ่งใช้งานได้กับอุปกรณ์และเบราว์เซอร์ที่แตกต่างกันโดยไม่มี UI ผิดปกติ

ฉันเพิ่งพบแอปพลิเคชันเว็บที่ฉันออกแบบมามีปัญหากับ iPhones และ iPads และพบบทความที่แนะนำให้แก้ปัญหาโดยใช้คำสั่งสื่อที่กำหนดเป้าหมายไปยังอุปกรณ์ Apple ที่เฉพาะเจาะจง

ฉันไม่รู้ว่าฉันสามารถแบ่งปันรหัสจากบทความนั้นได้หรือไม่ แต่ที่อยู่คือ: http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

การอ้างถึงบทความ: "เพียงแค่จับคู่ความสูงขององค์ประกอบกับความสูงของอุปกรณ์โดยใช้คำสั่งสื่อที่กำหนดเป้าหมายเป็นความละเอียด iPhone และ iPad รุ่นเก่ากว่า"

พวกเขาเพิ่มการสืบค้นสื่อเพียง 6 ครั้งเพื่อปรับองค์ประกอบความสูงเต็มรูปแบบและควรทำงานเนื่องจากมีการใช้ CSS อย่างสมบูรณ์

แก้ไขที่รอดำเนินการ: ฉันไม่สามารถทดสอบได้ในตอนนี้ แต่ฉันจะกลับมาและรายงานผลลัพธ์ของฉัน

ฉันใหม่ฉันไม่สามารถแสดงความคิดเห็นกับคำตอบอื่น ๆ ได้

หากใครบางคนกำลังมองหาคำตอบที่จะทำให้งานนี้ (และสามารถใช้จาวาสคริปต์ - ตามที่ดูเหมือนว่าจะต้องทำให้การทำงานนี้ในขณะนี้) วิธีการนี้ได้ผลดีสำหรับฉันและบัญชีสำหรับการวางแนวทางมือถือเช่นกัน ฉันใช้ Jquery สำหรับโค้ดตัวอย่าง แต่ควรสามารถทำได้กับ vanillaJS

- ก่อนอื่นฉันใช้สคริปต์เพื่อตรวจสอบว่าอุปกรณ์นั้นเป็นแบบสัมผัสหรือโฮเวอร์ ตัวอย่างกระดูกเปลือย:

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

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

เพิ่มคลาสให้กับองค์ประกอบร่างกายตามประเภทอุปกรณ์ (โฮเวอร์หรือสัมผัส) ที่สามารถใช้ในภายหลังสำหรับสคริปต์ความสูง

- ถัดไปใช้รหัสนี้เพื่อตั้งค่าความสูงของอุปกรณ์เมื่อโหลดและการเปลี่ยนทิศทาง:

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


}

- หมดเวลามีการตั้งค่าเพื่อให้อุปกรณ์จะคำนวณความสูงใหม่ได้อย่างถูกต้องเกี่ยวกับการเปลี่ยนทิศทาง หากไม่มีการหมดเวลาในประสบการณ์ของฉันความสูงจะไม่ถูกต้อง 500ms อาจจะหักโหม แต่ได้ผลสำหรับฉัน

-100vh บนอุปกรณ์โฮเวอร์เป็นทางเลือกหากเบราว์เซอร์แทนที่ CSS 100vh

รหัสต่อไปนี้แก้ไขปัญหา (ด้วย jQuery)

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

และองค์ประกอบอื่น ๆ ที่ใช้เป็นหน่วยที่จะมาแทนที่%vh

นี่คือสิ่งที่ฉันใช้สำหรับแอป React ของฉัน

iPhone 11 Pro และ iPhone Pro Max - 120px

iPhone 8 - 80px

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

เป็นการแก้ไขที่ค่อนข้างเรียบง่าย

การทำงานต่อไปนี้สำหรับฉัน:

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

bodyจะใช้ความสูงวิวพอร์ตที่มองเห็นและ#your-app-containerมีheight: 100%จะทำให้ภาชนะที่ใช้ความสูงวิวพอร์ตที่มองเห็นได้

หวังว่านี่จะเป็นตัวแปรสภาพแวดล้อม CSS ที่กำหนดโดย UA ตามที่แนะนำไว้ที่นี่: https://github.com/w3c/csswg-drafts/issues/2630#issuecomment-397536046

เพราะมันจะไม่ได้รับการแก้ไขคุณสามารถทำสิ่งที่ชอบ:

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

# css
.content {
  height: 80vh;
}

สำหรับฉันมันเป็นทางออกที่รวดเร็วและบริสุทธิ์กว่าเล่นกับ JavaScript ซึ่งไม่สามารถใช้งานได้กับอุปกรณ์และเบราว์เซอร์จำนวนมาก

เพียงใช้ค่าที่เหมาะสมvhซึ่งเหมาะกับความต้องการของคุณ

การใช้ vh บนอุปกรณ์มือถือจะไม่ทำงานกับ 100vh เนื่องจากตัวเลือกการออกแบบโดยใช้ความสูงทั้งหมดของอุปกรณ์โดยไม่รวมแถบที่อยู่ ฯลฯ

หากคุณกำลังมองหาเลย์เอาต์รวมถึง div ความสูงตามความสูงของมุมมองที่แท้จริงฉันใช้สารละลาย css บริสุทธิ์ต่อไปนี้:

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

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

คุณมีสองตัวเลือกสำหรับการตั้งค่าความสูงวิวพอร์ตตั้งค่า --devHeight ให้เป็นความสูงด้วยตนเอง (แต่คุณจะต้องป้อนค่านี้สำหรับอุปกรณ์แต่ละประเภทที่คุณกำลังเข้ารหัส)

หรือ

ใช้จาวาสคริปต์เพื่อรับความสูงของหน้าต่างจากนั้นอัปเดต - ความสูงในการโหลดและรีเฟรชวิวพอร์ต (แต่ต้องใช้จาวาสคริปต์และไม่ใช่โซลูชัน css บริสุทธิ์)

เมื่อคุณได้รับความสูงของการดูที่ถูกต้องแล้วคุณสามารถสร้าง Divs ได้หลายตัวในอัตราร้อยละที่แน่นอนของความสูงวิวพอร์ตโดยเพียงแค่เปลี่ยนตัวคูณใน Div แต่ละอันที่คุณกำหนดความสูงไว้

0.10 = 10% ของความสูงของมุมมอง 0.57 = 57% ของความสูงของมุมมอง

หวังว่าสิ่งนี้อาจช่วยให้ใครบางคน;)

คุณสามารถทำได้โดยเพิ่มสคริปต์และสไตล์ต่อไปนี้

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

สไตล์

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

ลองhtml, body { height: 100% }ทำบางสิ่งเพื่อผลกระทบของ 100vh บนอุปกรณ์มือถือ

คุณสามารถลองให้position: fixed; top: 0; bottom: 0;คุณสมบัติกับภาชนะของคุณ