地址欄隱藏在電話酒吧「100％的高度」了

滾動時，我有這個下面的演示網站：內容http://woohooo.fortleet.com/地址欄隱藏在電話酒吧「100％的高度」了

件以及導航被設置爲100％的高度。當我在我的手機上時，當我向上滾動時，隱藏了頂部的這個網址欄。但是，這種效果將100％的高度混亂，因爲它會調整爲新的瀏覽器大小，從而產生令人不快的效果。 'vh'和'vw'單位也是一樣。

我已經試過如下：

function windowDimensions() { 

    if (html.hasClass('touch')) { 
    height = window.screen.height; 
    width = window.screen.width; 
    } else { 
    height = win.height(); 
    width = win.width(); 
    } 

} 

function screenFix() { 
    if (html.hasClass('touch')) { 

    touch = true; 
    nav.css({'height' : height + 'px'}); 
    home.css({'height' : height + 'px'}); 
    header.css({'height' : height/2 + 'px'}); 
    content.css({'min-height' : height + 'px'}); 

    } 
}

然而，這產生了一個問題，因爲在最高層有這個酒吧與電池，無線網絡，信號信息，其也佔屏幕高度，使'100％'和'vh'元素變得更大。

我不敢相信我沒有發現任何其他問題，因爲我認爲這是100％/ 100％網站的一個相當常見的問題。

你們知道解決這個問題嗎？

來源

2015-07-19 Idefixx

屏幕大小可能包括工具欄，並可能包含狀態欄。改用視口尺寸。 http://ryanve.com/lab/dimensions/既然你已經在使用jQuery，那麼'$（document）.height（）'和'$（document）.width（）'應該讓你開始。 – Palpatim

當你只有35歲時，你會如何給50分呢？ – saj

@saj 50是從我 – fred1234

你的視口元標記似乎罰款。 100vh不會考慮菜單/ wifi /頂部欄。它只會提供視口高度，而不考慮手機上的菜單欄。重要的是要注意100vh和100％不會是同一個高度。我在移動設備和桌面上查看了您的網站，每個部分似乎都是100vh，沒有任何額外的填充（所以對我來說看起來是正確的）。

如果您指的是滾動時自動切換進入和切出的「iPhone」URL欄，那麼您將無法隱藏或切換該顯示。當您向上滾動時，URL欄會出現...所以是的...這可能意味着您將有20px左右的圖像，當用戶向上滾動時將不可見。但是，這通常不是問題，因爲當您向下滾動IOS時，隱藏該欄......以不影響屏幕視圖。這可能不會回答你的問題，但是URL地址欄就是我認爲你的意思。

來源

2015-07-21 20:52:10 Joey

問題是，'vh'單位實際上會計算Android Chrome上的網址欄。我報告了這個問題，他們在我們發言時似乎正在努力。它目前計劃在v46修復 – Idefixx

由於沒有答案被選中。由於我不希望它被浪費，而且這個答案最有價值，所以我已經獎賞了這個答案。 – fred1234

聽起來好像您的視口未正確設置。我很確定它不應該考慮額外的10 - 20像素。

如果您尚未嘗試設置查看端口元並禁用所有縮放選項。希望這有助於:)

編號：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

來源

2015-07-21 20:35:17

地址欄隱藏在電話酒吧「100％的高度」了

回答

相關問題