偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

2025年請停止在移動設(shè)備上使用 100vh,你應(yīng)該學(xué)會使用這些新的 CSS 單位

開發(fā) 前端
大多數(shù)現(xiàn)代瀏覽器現(xiàn)在都支持這些單位,包括 Chrome、Safari 和 Firefox。如果您支持舊設(shè)備或小眾瀏覽器,請?jiān)L問 caniuse.com 獲取最新版本。但從 2025 年起,在大多數(shù)應(yīng)用中,我們都可以安全使用它們。

如果你正在構(gòu)建一個移動端的應(yīng)用產(chǎn)品,在桌面瀏覽器中一切看起來都很棒,但在手機(jī)上,你精心設(shè)計(jì)的部分卻被尷尬地截?cái)嗔??;蛘邼L動起來很奇怪。更糟糕的是,當(dāng)瀏覽器 UI 隱藏或重新顯示時,它會移動。

你會怎么處理這些問題?我想你肯定是使用了 height: 100vh ,就像每個 CSS 教程都說的那樣。

我遇到過這種情況。我們很多人都遇到過。問題是什么?在移動瀏覽器上,100vh 并不能達(dá)到你的預(yù)期。

實(shí)際情況是這樣的:

在桌面上,100vh 指的是瀏覽器窗口的完整高度,很簡單。

但在移動設(shè)備上,瀏覽器的邊(地址欄、工具欄)是動態(tài)的。當(dāng)用戶打開頁面時,工具欄是可見的。當(dāng)用戶滾動時,瀏覽器會隱藏它們以提供更多的屏幕空間。這會改變可見高度。

但 100vh 并不在乎這些。它只會采用盡可能大的視口高度——通常比當(dāng)前可見的高度還要高。這就是為什么部分內(nèi)容會顯得過高,內(nèi)容會溢出到折疊線以下,感覺一切都不對勁。

這就是為什么人們經(jīng)常使用像 window.innerHeight 這樣的 JavaScript hack 來手動修復(fù)布局,但這很麻煩、容易出錯,而且擴(kuò)展性也不好。

那有沒有更好的解決方案呢?

CSS 為我們提供了合適的工具:svh、lvh 和 dvh

這些視口單位是 CSS 值和單位模塊 4 級的一部分,它們最終讓我們能夠正確地處理移動設(shè)備的高度變化。

讓我們來詳細(xì)了解一下它們。

01.svh – 小視口高度

這表示視口可以達(dá)到的最小高度,也就是瀏覽器工具欄可見的時候。

當(dāng)需要確保沒有任何內(nèi)容被隱藏在移動 UI 后面時,它非常有用——例如,即使在用戶滾動之前,表單或按鈕也需要保持在屏幕上。

height: 100svh;

當(dāng)內(nèi)容需要適應(yīng)初始可見空間時,請使用此選項(xiàng),無需擔(dān)心意外。

02.lvh – 大視口高度

此選項(xiàng)反映了最大視口高度——基本上是在瀏覽器 UI 完全隱藏的情況下。

它適用于在用戶滾動后接管的全屏部分,或者當(dāng)您想要“真正的”全高體驗(yàn)時。

height: 100lvh;

想象一下啟動畫面、入門步驟或沉浸式部分。

03.dvh – 動態(tài)視口高度

這是三者中最實(shí)用的,它會根據(jù)瀏覽器的狀態(tài)自動在 svh 和 lvh 之間調(diào)整。

如果工具欄可見,則更接近 svh。如果工具欄隱藏,則會擴(kuò)展為 lvh。簡而言之,它反映了屏幕的當(dāng)前高度——這正是我們大多數(shù)人期望 100vh 能做到的,但實(shí)際上卻從未做到。

height: 100dvh;

現(xiàn)在,這是我大多數(shù)布局的首選。無論瀏覽器界面是打開、關(guān)閉還是在兩者之間切換,它都能正常工作。

在移動設(shè)備上打開此示例,瀏覽所有高度的頁面,并在導(dǎo)航后上下滾動頁面。

https://v0-create-navigation-app.vercel.app/

真實(shí)案例

不久前,我為一位客戶構(gòu)建了一個產(chǎn)品落地頁。主頁面的背景圖片高度為 100vh。在桌面端,效果完美。但在移動設(shè)備上呢?圖片溢出了,很尷尬,CTA 按鈕在 Safari 工具欄下半隱藏,滾動會導(dǎo)致布局偏移。

將高度改為 100dvh 后,所有問題都解決了。無需 JavaScript,也無需任何奇怪的變通方法,只需調(diào)整大小即可。

從那時起,我開始將 dvh 作為移動設(shè)備上所有全高布局的默認(rèn)高度。

為什么要切換

這樣就無需與瀏覽器對抗了,這樣可以減少工具欄顯示或隱藏時布局偏移,您無需使用 JavaScript 即可修復(fù) CSS。

您的 UI 在真實(shí)設(shè)備上的可預(yù)測性將更加顯著——這才是最重要的。

最后一點(diǎn):瀏覽器支持

大多數(shù)現(xiàn)代瀏覽器現(xiàn)在都支持這些單位,包括 Chrome、Safari 和 Firefox。如果您支持舊設(shè)備或小眾瀏覽器,請?jiān)L問 caniuse.com 獲取最新版本。但從 2025 年起,在大多數(shù)應(yīng)用中,我們都可以安全使用它們。

請參閱 MDN 上的此文檔,了解瀏覽器支持情況:https://developer.mozilla.org/en-US/docs/Web/CSS/length

這些 CSS 單位解決了我們多年來一直困擾的問題。如果您注重移動體驗(yàn),請停止依賴 100vh。

使用合適的單位:

  • 當(dāng)布局必須始終可見時,請使用 svh。
  • 用于沉浸式全屏視圖的 lvh。
  • 用于自然流暢、自適應(yīng)的響應(yīng)式布局的 dvh。

在您的下一個項(xiàng)目中嘗試一下,您會立即感受到它的不同——您的用戶也會如此。

最后,感謝您的閱讀,祝編程愉快。

責(zé)任編輯:龐桂玉 來源: web前端開發(fā)
相關(guān)推薦

2025-05-07 00:00:00

CSS單位JavaScript

2022-08-24 10:03:18

CSS文本按鈕

2022-05-31 12:26:50

移動響應(yīng)css

2021-10-09 10:50:30

JavaScript編程開發(fā)

2025-05-19 00:05:12

2024-11-19 08:35:49

前端開發(fā)數(shù)組

2009-11-05 15:25:36

WCF服務(wù)端配置

2022-03-09 08:14:24

CSS容器container

2015-11-06 13:37:25

Git配置文件Linux

2021-07-28 08:53:53

GoGDB調(diào)試

2023-05-24 16:41:41

React前端

2016-03-09 09:35:42

Windows 10開源軟件

2024-08-16 09:05:26

CSSmarginpadding

2021-07-05 07:49:14

CSS自定義滾動條CSS技巧

2021-05-12 07:50:05

Linux運(yùn)維Linux系統(tǒng)

2024-05-10 12:29:30

接口類型

2020-10-23 09:57:23

TypeScriptany代碼

2017-12-28 15:26:37

2020-10-31 21:59:37

Python列表開發(fā)

2020-08-05 08:27:38

CSS Firefox瀏覽器
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號