在所有移動設備上將網站設置爲全屏

我試圖找到一種方法將網站正文元素的大小設置爲可用屏幕的大小。在桌面瀏覽器上，很容易：width=height=100%但在移動設備上並非如此簡單：在所有移動設備上將網站設置爲全屏

許多設備默認使用某種初始縮放設置，嘗試以最佳可讀的比例顯示頁面。對於Android，我可以用下面的<head> -tag關閉這個功能：

<meta name="viewport" content="width=device-width, height=device-height, target-densitydpi=high-dpi, initial-scale=1.0>

現在，定身寬度按預期工作（在Android設備）。高度是一個完全不同的問題，因爲瀏覽器會根據地址欄的當前位置設置100％的含義。因此，如果您的網頁最初比可見網頁長，並且已經滾動，地址欄不在屏幕上，則將高度設置爲100％會產生期望的效果。但是，只要用戶將頁面向下移動以顯示地址欄，高度就會更新，從而不再可能在另一個方向上向後滾動。

因此，對於移動設備，似乎正確設置身高的唯一方法是將其設置爲像素大小而不是100％。但是看完this article on all the different available size measures (screen.height, window.outerheight, ...)給了我有關使不寒而慄它可以跨設備使用：

因此我的問題：

有沒有一種可靠的，最佳實踐的方式來實現設置主體元素的大小等移動設備上的頁面佔用所有可用的屏幕房地產（包括將地址欄推到屏幕外），但是沒有更多？額外的功勞：可以這樣做，這樣用戶仍然可以放大（但不是在頁面上）？至少在桌面上（IE6 +，Opera，Chrome，Firefox，Safari）以及移動設備上，儘可能多的設備都可以使用，不管是使用JavaScript還是CSS，或者兩者兼而有之。（手機，平板電腦，Android，iOS，Windows Mobile）。

來源

2013-04-14 Markus A.

我不完全清楚你在哪裏與此標題，但看看這些建議是否有幫助。

的元標記，試着

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

我不知道是否需要目標densitydpi =高DPI。如果有必要，很容易更換。

對於CSS

html, 
body { 
    height: 100%; 
    }

並隱藏地址欄，我用this code with good results之前，或here's another that I haven't used

祝你好運！

來源

2013-04-14 12:20:28

在所有移動設備上將網站設置爲全屏

回答

相關問題