Chrome移動設備中的錯誤視口

我嘗試製作響應式移動設備菜單，並且遇到了Google Chrome移動設備和其他瀏覽器中視口之間不同的問題。請參見下面的截圖：Chrome移動設備中的錯誤視口

通過綠色我畫視口的邊界。這裏的第一張圖片是用chrome mobile製作的，第二張是默認設備瀏覽器。在移動IOS上，結果與最後一張圖像相同。紅色的按鈕，預定工作室固定與底部0.它必須始終在屏幕的底部。所以，問題是：

爲什麼鉻使viwport的高度大於它真的是？

處理這個問題的最佳方法是什麼？

設置視口元標記也沒有幫助。

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=0" />

有人可以建議嗎？

來源

2017-09-05 volodymyr3131

的你需要證明我們你的代碼。請閱讀以下內容：[MCVE] – Turnip

它可能與Chrome上的地址欄有關 - 它不會發揮出色效果 – Zac

這是Iphone上的問題。我有這個問題，我不記得確切，但我認爲這是Iphone底線，不計算VH。也許一些iPhone的meta只能解決這個問題。 –

不幸的是，這是故意的......

這是一個衆所周知的問題（至少在Safari移動），這是故意的，因爲它可以防止其他問題。 Benjamin Poulain回覆了一個webkit的bug：

這完全是故意的。爲了達到這個效果，我們在部分花了相當多的工作。 :)

基本問題是這樣的：可見區域動態變化，因爲你滾動。如果我們相應地更新CSS視口的高度，我們需要在滾動過程中更新佈局。不僅如此，看起來像狗屎，但在大多數頁面中以60 FPS進行操作實際上是不可能的（60 FPS是iOS上的基準幀率）。

很難向你展示「看起來像狗屎」的部分，但想象你滾動，內容移動，你想要在屏幕上連續轉移。

動態更新的高度不能正常工作，我們有幾個選擇：降視臺iOS上，與文檔大小一樣的iOS 8，前用小視圖大小，使用大視圖大小。

從我們的數據中，使用較大的視圖尺寸是最好的折中方案。大多數使用視口單元的網站在當時看起來最好，大多數是。

薩科Hoizey研究過這個頗有幾分：https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

沒有修復計劃

在這一點上，沒有太多可以從不同的使用移動設備上的視口高度副歌做。移動Chrome瀏覽器似乎也想調整這一點，雖然不知道他們是否會繼續。

解決這個問題的唯一方法是使用這個片段：

height: calc(100vh - 60px); 60px

，其中60像素的頂部導航的高度，這可能會有所不同取決於設備

來源

2017-09-05 12:42:59

是的，你的回答對某些設備來說是正確的，但是它確定了它在外觀上的樣子（儘管如此，感謝你的幫助！） – volodymyr3131

如果這個答案很有用，請將它標記爲正確的答案。 –

-2

嘗試使用下面的CSS

bottom: 0; 
position: fixed;

來源

2017-09-05 12:23:50

Chrome移動設備中的錯誤視口

回答

相關問題