Hybrid app開發獲取webview螢幕寬度
阿新 • • 發佈：2019-01-02
如果你以為用screen.width就可以獲取到螢幕的寬度，沒錯，
但如果你想獲取的是全屏webview瀏覽器的頁面寬度，那麼不出意外，錯了。
比如手機螢幕1920x1080畫素，那麼你screen.width獲取到的結果將是1080
也就是說真實的screen.width獲取的是手機螢幕的寬度，與webview瀏覽器的寬度是不同的。
不同的作業系統webview瀏覽器使用的解析度不同，主流的寬度為 320 480 720 1080 等各種尺寸
由於我們的頁面基本上都會使用meta標籤來定義移動端頁面展示：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
這裡的width=device-width代表是可視區域的寬度為螢幕寬度，並不是說值相等，而是說瀏覽器中css的1px代表了n個螢幕畫素點。
你可以通過window.innerWidth來獲取，但是部分作業系統上可能有誤（Android 2, Oprea mini 和 UC 8）
（參考：http://www.cnblogs.com/2050/p/3877280.html）
你也可以通過document.body.clientWidth或document.documentElement.clientWidth來獲取，但值獲取正確與否，與你是否使用了html相應的API有關，即
1、若網頁中含有有了標準宣告（即頁面加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">這行程式碼，標準宣告的存在會對document.body和document.documentElement的屬性值有影響）時，則應該使用document.documentElement
2、若網頁中只有<html>而沒有上面的一行程式碼，則JS指令碼應該使用document.body
（參考：http://www.tc5u.com/javascript/2085815.htm）
console.log("screen.width=" + screen.width + ",height=" + screen.height);
console.log("window.screen.width=" + window.screen.width);
console.log("document.body.clientWidth.screen.width=" + document.body.clientWidth);
console.log("document.documentElement.clientWidth.screen.width=" + document.documentElement.clientWidth);
console.log("window.innerWidth.screen.width=" + window.innerWidth);
-------------結果------------------------------------------------------------------------------
screen.width=1080,height=1776
window.screen.width=1080
document.body.clientWidth.screen.width=360
document.documentElement.clientWidth.screen.width=360
window.innerWidth.screen.width=360
但如果你想獲取的是全屏webview瀏覽器的頁面寬度，那麼不出意外，錯了。
比如手機螢幕1920x1080畫素，那麼你screen.width獲取到的結果將是1080
也就是說真實的screen.width獲取的是手機螢幕的寬度，與webview瀏覽器的寬度是不同的。
不同的作業系統webview瀏覽器使用的解析度不同，主流的寬度為 320 480 720 1080 等各種尺寸
由於我們的頁面基本上都會使用meta標籤來定義移動端頁面展示：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
這裡的width=device-width代表是可視區域的寬度為螢幕寬度，並不是說值相等，而是說瀏覽器中css的1px代表了n個螢幕畫素點。
你可以通過window.innerWidth來獲取，但是部分作業系統上可能有誤（Android 2, Oprea mini 和 UC 8）
（參考：http://www.cnblogs.com/2050/p/3877280.html）
你也可以通過document.body.clientWidth或document.documentElement.clientWidth來獲取，但值獲取正確與否，與你是否使用了html相應的API有關，即
1、若網頁中含有有了標準宣告（即頁面加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">這行程式碼，標準宣告的存在會對document.body和document.documentElement的屬性值有影響）時，則應該使用document.documentElement
2、若網頁中只有<html>而沒有上面的一行程式碼，則JS指令碼應該使用document.body
（參考：http://www.tc5u.com/javascript/2085815.htm）
console.log("screen.width=" + screen.width + ",height=" + screen.height);
console.log("window.screen.width=" + window.screen.width);
console.log("document.body.clientWidth.screen.width=" + document.body.clientWidth);
console.log("document.documentElement.clientWidth.screen.width=" + document.documentElement.clientWidth);
console.log("window.innerWidth.screen.width=" + window.innerWidth);
-------------結果------------------------------------------------------------------------------
screen.width=1080,height=1776
window.screen.width=1080
document.body.clientWidth.screen.width=360
document.documentElement.clientWidth.screen.width=360
window.innerWidth.screen.width=360