知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    js獲取移動端屏幕高度和寬度等設備尺寸

    作者:佳明媽 來源:web前端開發 2016-08-26 人氣:
    js獲取移動端屏幕高度和寬度等設備尺寸,兼容性比較好的方法:document.documentElement.clientWidth;document.documentElement.clientHeight; 這段js代碼得到的就是移動設備的可見寬高
    js獲取移動端屏幕高度和寬度等設備尺寸,兼容性比較好的方法:

    document.documentElement.clientWidth;
    document.documentElement.clientHeight;


    這段js代碼得到的就是移動設備的可見寬高,比如iPhone 4s在微信內設置了viewport為1的時候為320*416(手機480 - 微信狀態欄64),iPhone 5里為320*504,
    其他的計算方式兼容性均不好,

    document.documentElement是個什么鬼?documentElement 是整個節點樹的根節點root,即<html> 標簽,而body是子節點,要訪問到body標簽,在腳本中應該寫:document.body

    如下各種尺寸在移動端均不能獲得真實的屏幕高度和寬度等設備尺寸
    <script language="javascript">
    var h = "";
    h += " 網頁可見區域寬:"+ document.body.clientWidth+"
    ";
    h += " 網頁可見區域高:"+ document.body.clientHeight+"
    ";
    h += " 網頁可見區域寬:"+ document.body.offsetWidth +" (包括邊線和滾動條的寬)"+"
    ";
    h += " 網頁可見區域高:"+ document.body.offsetHeight +" (包括邊線的寬)"+"
    ";
    h += " 網頁正文全文寬:"+ document.body.scrollWidth+"
    ";
    h += " 網頁正文全文高:"+ document.body.scrollHeight+"
    ";
    h += " 網頁被卷去的上:"+ document.body.scrollTop+"
    ";
    h += " 網頁被卷去的左:"+ document.body.scrollLeft+"
    ";
    h += " 網頁正文部分上:"+ window.screenTop+"
    ";
    h += " 網頁正文部分左:"+ window.screenLeft+"
    ";
    h += " 屏幕分辨率的寬:"+ window.screen.width+"
    ";
    h += " 屏幕分辨率的高:"+ window.screen.height+"
    ";
    h += " 屏幕可用工作區寬度:"+ window.screen.availWidth+"
    ";
    h += " 屏幕可用工作區高度:"+ window.screen.availHeight+"
    ";
    h += " 你的屏幕設置是 "+ window.screen.colorDepth +" 位彩色"+"
    ";
    h += " 你的屏幕設置 "+ window.screen.deviceXDPI +" 像素/英寸"+"
    ";
    alert(h);
    </script>
    ↓ 查看全文

    js獲取移動端屏幕高度和寬度等設備尺寸由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    js獲取移動端屏幕高度和寬度等設備尺寸-最新評論

    老子是皇帝在线客服