如何使用Javascript找到虛擬視口/屏幕寬度？

Question

是否有一致的方法來確定使用Javascript的移動設備的屏幕寬度和虛擬視口？ 我的目標平台是移動Safari和Android的股票瀏覽器，但我也在測試Android上的其他瀏覽器。

我試過使用screen.width ， window.innerWidth ， document.getElementByTagName("body")[0].clientWidth和jQuery的$(window).width() 。

移動Safari（來自ios 3.1.3（7E18），原始iPod touch）顯示有用的值，但是Android瀏覽器（Android 2.3.7）卻沒有。

理想情況下，我認為screen.width應該顯示屏幕的實際像素分辨率：iPod Touch上為320px，三星Galaxy S2上為480px。 viewport which should be 980px on the iTouch and 800px on the Samsung Galaxy S2. 基於我一直在閱讀的內容，其他一個數字應該顯示視口的寬度，iTouch上的亮度應為980px，三星Galaxy S2上的寬度應為800px。 。
。

碼

<body>
<h1>screen.width: <span id="screen_width"></span></h1>
<h1>window.innerwidth: <span id="window_innerwidth"></span></h1>
<h1>clientWidth: <span id="clientwidth"></span></h1>
<h1>jQuery width: <span id="jquery_width"></span></h1>
</body>

<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var swidth = screen.width;
        var wiwidth = window.innerWidth;
        var cwidth = document.getElementsByTagName("body")[0].clientWidth;
        var jwidth = $(window).width();
        document.getElementById("screen_width").innerHTML = swidth;
        document.getElementById("window_innerwidth").innerHTML = wiwidth;
        document.getElementById("clientwidth").innerHTML = cwidth;
        document.getElementById("jquery_width").innerHTML = jwidth;
    }
</script>

。
。

結果

iOS Safari ：
screen.width：320
window.innerwidth：980
clientWidth：964
jQuery寬度：980

Android瀏覽器 ：
screen.width：800
window.innerWidth：800
clientWidth：784
jQuery寬度：800

Firefox Mobile（又名Fennec） ：
screen.width：480
window.innerwidth：980
clientWidth：964
jQuery寬度：980

Safari結果肯定是可用的，但不是Android瀏覽器的結果。

具有諷刺意味的是，Firefox移動結果是准確的。 雖然從用戶的角度來看它提供了很好的瀏覽體驗，但對於移動設備而言，它並不是一個足夠大的目標，而且還有很多其他的東西在這個瀏覽器上不能很好地工作。

Answer 1

使用此<meta >標記可能有助於將viewport的比例設置為1.0 ：

<meta name="viewport" content="initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0;"/>

當我為移動應用程序創建響應式HTML / CSS布局時，我解決了類似的問題（我使用的是CSS @media查詢）。

Answer 2

另一個StackOverflow問題有一個解決方法：

setTimeout(YourFunction, 200);

如果您需要詳細信息，可以閱讀問題跟蹤器中的錯誤。 您遇到了Android 2.2和2.3中存在的錯誤。

Answer 3

您可以通過訪問設備上的以下鏈接找到各種視口寬度

http://ipad.atwebpages.com/viewport.html

這適用於桌面和移動瀏覽器..

只是添加，視口主要僅適用於移動設備......

如何使用Javascript找到虛擬視口/屏幕寬度？

問題描述

碼

結果

3 個解決方案

解決方案1
3 2011-12-30 09:25:02

解決方案2
3 已采納 2012-01-12 19:26:38

解決方案3
1 2011-12-31 09:53:22

如何使用Javascript找到虛擬視口/屏幕寬度？

問題描述

碼

結果

3 個解決方案

解決方案1 3 2011-12-30 09:25:02

解決方案2 3 已采納 2012-01-12 19:26:38

解決方案3 1 2011-12-31 09:53:22

解決方案1
3 2011-12-30 09:25:02

解決方案2
3 已采納 2012-01-12 19:26:38

解決方案3
1 2011-12-31 09:53:22