国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Chrome, vh Is Always Calculated as If the Url Bar

gotham / 1446人閱讀

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/114363.html

相關文章

  • 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 ...

    xioqua 評論0 收藏0
  • flask 源碼解析:請求

    摘要:可以看到,雖然是同樣的請求數據,在不同的階段和不同組件看來,是完全不同的形式。請求還有一個不那么明顯的特性它不能被應用修改,應用只能讀取請求的數據。 這是 flask 源碼解析系列文章的其中一篇,本系列所有文章列表: flask 源碼解析:簡介 flask 源碼解析:應用啟動流程 flask 源碼解析:路由 flask 源碼解析:上下文 flask 源碼解析:請求 flask 源碼解...

    weizx 評論0 收藏0
  • 根治JavaScript中的this-ECMAScript規范解讀

    摘要:執行函數調用規范中的第一步是一個明顯的賦值語句,我們查看規范,賦值語句會發生什么可以看出簡單賦值語句返回的是對等于號右邊進行之后的結果,上一節講了,執行過就會返回的類型,此處會返回也就是一個類型。 前言 this是JavaScript中的著名月經題,每隔一段時間就有人翻出了拿各種奇怪的問題出來討論,每次都會引發一堆口水之爭。從搜索引擎搜了一下現在的比較熱門的關于this的用法,如:Ja...

    notebin 評論0 收藏0
  • css3 attr 簡單介紹和實例

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

    GeekGhc 評論0 收藏0
  • 深入理解JavaScript內部原理: function(轉)

    摘要:注意,下面一個立即執行的函數,周圍的括號不是必須的,因為函數已經處在表達式的位置,解析器知道它處理的是在函數執行階段應該被創建的,這樣在函數創建后立即調用了函數。 本文是翻譯http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/#introduction 概要In this article we will talk abou...

    OnlyLing 評論0 收藏0

發表評論

0條評論

gotham

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<