成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Chrome, vh Is Always Calculated as If the Url Bar

xioqua / 981人閱讀

The first time when I know vh I was very excited. Finally, we can do this by css instead of js. However, still too naive.

As we all know, scroll bar would hide automatically on mobile. So, it wouldn"t affect the layout like on desktop.

However, the address bar would also hide when scrolling. Like images below:

And the code is:



  
    
    
    
    Document
    
  

  
    

      

      

      
app__footer

The viewport size changes when scrolling. In my Mi6X, the smaller is 659px while the larger one is 715px when the address bar is hidden.

According to test on chrome 70, height:100% and window.innerHeight is always equal to the smaller one. I think it is correct. I also thought 100vh would act like 100%. However, it"s not.

According to developers.google the vh is always calculated as if the URL bar is hidden since Chrome version 56.

So, 100vh is equal to the larger one which is 715px on my phone. That"s why images above would happen. In this case, if we use something like bottom:0; with 100vh we would meet situation like image one. Part of app__footer was covered. Instead, if we use height:100%, it won"t happen.

However, as we all know it wouldn"t be possible to use 100% when we were in nested css modules. So, in this case, how can we get the 100% in nested css modules?

Of course, we can save the 100% to rem like:

document.documentElement.style.fontSize = window.innerHeight * 0.01 + "px"

But I think the better way is using CSS_variables. For example:

html,
body,
.app {
  /* height: 100%; */
  /* height: 100vh; */
  height: calc(var(--vh) * 100);
}
document.documentElement.style.setProperty(
  "--vh",
  window.innerHeight * 0.01 + "px"
)

Also, if you are worried about the compatibility. Here is the polyfill.

Original Post

Reference

the-trick-to-viewport-units-on-mobile

CSS3 100vh not constant in mobile browser

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99733.html

相關(guān)文章

  • Chrome, vh Is Always Calculated as If the Url Bar

    The first time when I know vh I was very excited. Finally, we can do this by css instead of js. However, still too naive. As we all know, scroll bar would hide automatically on mobile. So, it wouldnt ...

    gotham 評(píng)論0 收藏0

  • flask 源碼解析：請(qǐng)求

    摘要：可以看到，雖然是同樣的請(qǐng)求數(shù)據(jù)，在不同的階段和不同組件看來(lái)，是完全不同的形式。請(qǐng)求還有一個(gè)不那么明顯的特性它不能被應(yīng)用修改，應(yīng)用只能讀取請(qǐng)求的數(shù)據(jù)。 這是 flask 源碼解析系列文章的其中一篇，本系列所有文章列表： flask 源碼解析：簡(jiǎn)介 flask 源碼解析：應(yīng)用啟動(dòng)流程 flask 源碼解析：路由 flask 源碼解析：上下文 flask 源碼解析：請(qǐng)求 flask 源碼解...

    weizx 評(píng)論0 收藏0

  • 根治JavaScript中的this-ECMAScript規(guī)范解讀

    摘要：執(zhí)行函數(shù)調(diào)用規(guī)范中的第一步是一個(gè)明顯的賦值語(yǔ)句，我們查看規(guī)范，賦值語(yǔ)句會(huì)發(fā)生什么可以看出簡(jiǎn)單賦值語(yǔ)句返回的是對(duì)等于號(hào)右邊進(jìn)行之后的結(jié)果，上一節(jié)講了，執(zhí)行過(guò)就會(huì)返回的類(lèi)型，此處會(huì)返回也就是一個(gè)類(lèi)型。 前言 this是JavaScript中的著名月經(jīng)題，每隔一段時(shí)間就有人翻出了拿各種奇怪的問(wèn)題出來(lái)討論，每次都會(huì)引發(fā)一堆口水之爭(zhēng)。從搜索引擎搜了一下現(xiàn)在的比較熱門(mén)的關(guān)于this的用法，如：Ja...

    notebin 評(píng)論0 收藏0

  • css3 attr 簡(jiǎn)單介紹和實(shí)例

    摘要：表達(dá)式的計(jì)算值和屬性的值與指定名稱(chēng)的元素有關(guān)根據(jù)下面的規(guī)則在的表達(dá)總是返回一個(gè)字符串。在沒(méi)有命名空間這將只是一個(gè)標(biāo)識(shí)符。 本文不是w3c翻譯 保留原文的基礎(chǔ)上 做出自己的理解為主 參考 http://www.w3.org/TR/2015/CR-css-values-3-20150611/#attr-notation attr函數(shù)介紹 The attr() fun...

    GeekGhc 評(píng)論0 收藏0

  • 深入理解JavaScript內(nèi)部原理： function（轉(zhuǎn)）

    摘要：注意，下面一個(gè)立即執(zhí)行的函數(shù)，周?chē)睦ㄌ?hào)不是必須的，因?yàn)楹瘮?shù)已經(jīng)處在表達(dá)式的位置，解析器知道它處理的是在函數(shù)執(zhí)行階段應(yīng)該被創(chuàng)建的，這樣在函數(shù)創(chuàng)建后立即調(diào)用了函數(shù)。 本文是翻譯http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/#introduction 概要In this article we will talk abou...

    OnlyLing 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<