Js获取屏幕宽度、高度移动端H5适配

梦里梦外; 2023-01-15 11:26 690阅读 0赞

```javascript
    document.body.clientWidth ==> BODY对象宽度  
    document.body.clientHeight ==> BODY对象高度  
    document.documentElement.clientWidth ==> 可见区域宽度  
    document.documentElement.clientHeight ==> 可见区域高度  
      
    网页可见区域宽： document.body.clientWidth  
    网页可见区域高： document.body.clientHeight  
    网页可见区域宽： document.body.offsetWidth (包括边线的宽)  
    网页可见区域高： document.body.offsetHeight (包括边线的高)  
    网页正文全文宽： document.body.scrollWidth  
    网页正文全文高： document.body.scrollHeight  
    网页被卷去的高： document.body.scrollTop  
    网页被卷去的左： document.body.scrollLeft  
    网页正文部分上： window.screenTop  
    网页正文部分左： window.screenLeft  
    屏幕分辨率的高： window.screen.height  
    屏幕分辨率的宽： window.screen.width  
    屏幕可用工作区高度： window.screen.availHeight  
    屏幕可用工作区宽度： window.screen.availWidth  
      
    // 部分jQuery函数  
    $(window).height() 　//浏览器时下窗口可视区域高度   
    $(document).height()　　　　//浏览器时下窗口文档的高度   
    $(document.body).height()　　　　　　//浏览器时下窗口文档body的高度   
    $(document.body).outerHeight(true)　//浏览器时下窗口文档body的总高度 包括border padding margin   
    $(window).width() 　//浏览器时下窗口可视区域宽度   
    $(document).width()//浏览器时下窗口文档对于象宽度   
    $(document.body).width()　　　　　　//浏览器时下窗口文档body的高度   
    $(document.body).outerWidth(true)　//浏览器时下窗口文档body的总宽度 包括border padding  
      
    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth   
    scrollHeight: 获取对象的滚动高度。   
    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离   
    scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离   
    scrollWidth:获取对象的滚动宽度   
    offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度   
    offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置   
    offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置   
    event.clientX 相对文档的水平座标   
    event.clientY 相对文档的垂直座标   
    event.offsetX 相对容器的水平坐标   
    event.offsetY 相对容器的垂直坐标   
    document.documentElement.scrollTop 垂直方向滚动的值   
    event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

> 声明viewport视口  
> viewport对于移动端设备来说非常的重要，用于定义视口的各种行为。其中最为重要的就是要设定一个展示页面的宽度width=device-width，如果我们不设置的话，width默认的值是980PX，假设我们当前用的是IPHONE 5来访问H5页面，IPHONE 5本身的宽度只有320PX，但是设备定义了H5页面展示的区域宽度应该是980PX，这样的话要想把H5页面全部进行展示，只有整体缩小大约三倍或者让用户在320PX的区域中来回的挪动才能看全整个H5页面。这种方式用户的体验度会非常的差，所以我们设定width=device-width，意思是当前设备屏幕有多宽，那么就按照多宽来渲染页面，这样就不会出现需要靠缩小或者左右移动来看完整个页面了。

作者：河湾欢儿  
链接：https://www.jianshu.com/p/b7836e8b88ec  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

适配有两种写法：

/*动态改变根元素字体大小*/
    function recalc() { 
    	var clientWidth = document.documentElement.clientWidth;
    	if(!clientWidth) return;
    	document.documentElement.style.fontSize = 20 * (clientWidth / 640) + 'px';
    }
     
    function initRecalc() { 
    	recalc();
    	var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
    	if(!document.addEventListener) return;
    	window.addEventListener(resizeEvt, recalc, false);
    	document.addEventListener('DOMContentLoaded', recalc, false);
    }
     
    initRecalc();

> 这里使用了js控制根元素的font-size大小，然后进行rem换算，在js代码后面会说明以下问题。
> 
> 1.如何进行rem运算？
> 
> 2.如果纯js控制根元素用rem布局会出现的小问题，如何解决？
> 
> 3.如有欠缺的地方，大神们可以指出错误或者改进。

> 1.这段代码是基于640px的设计稿，基于640设计说明（明白了640怎么换算，720设计稿原理一样，替换以下JS代码里面的数字或者用传参的方式调用函数）
> 
> 假设我们拿到一张640的设计稿，有一个div宽度为200px，高度100px；你在640的页面去布局时，因为根元素取24px，把width值转换为rem可以直接用设计稿div的宽度除以24，200/24rem=8.33333333rem（当然是除不尽的，精确度建议保留8个小数点），而同理，高度height=100/24rem=4.16666667rem，这样布局可以很精确还原设计稿，当然最后推荐使用计算器。
> 
> 2.纯js控制会一个页面加载时候，知道加载完毕会出现由大变小的问题，这个是因为先加载页面然后再加载js，当没加载完这段js，函数没被调用，会出现很大字体或者图片很大，等JS加载完毕后，瞬间变回正常，这样会影响用户体验，这里有两个解决方法，
> 
> 一、像淘宝移动端那样，页面没加载完毕前显示一个loading页面，加载完毕后再显示内容。
> 
> 二、把加入一个css媒体查询样式表，页面先加载样式再加载内容，用css样式表去控制你的页面布局和js精确控制的布局偏差尽量降低到最小，这样加载完时候因为微小偏差的还原到精确的布局，这时候发生的变化非常微小（只有一个px左右的偏差）肉眼很难以看出（亲测实用），下面我贴出平时实用的css样式表，两张混合实用，移动端布局的问题得以完美的解决。

@charset "utf-8";
    /* CSS Document */
    
    /* ---------- Responsive accurate ---------- */
    @media (min-width:640px){ 
        html{ font-size:24px;}
        }
    }
    @media (min-width:631px) and (max-width:639px){ html{ font-size:23.66px;}}
    @media (min-width:622px) and (max-width:630px){ html{ font-size:23.33px;}}
    @media (min-width:613px) and (max-width:621px){ html{ font-size:23px;}}
    @media (min-width:604px) and (max-width:612px){ html{ font-size:22.66px;}}
    @media (min-width:595px) and (max-width:603px){ html{ font-size:22.33px;}}
    @media (min-width:586px) and (max-width:594px){ html{ font-size:22px;}}
    @media (min-width:577px) and (max-width:585px){ html{ font-size:21.66px;}}
    @media (min-width:568px) and (max-width:576px){ html{ font-size:21.33px;}}
    @media (min-width:559px) and (max-width:567px){ html{ font-size:21px;}}
    @media (min-width:550px) and (max-width:558px){ html{ font-size:20.66px;}}
    @media (min-width:541px) and (max-width:549px){ html{ font-size:20.33px;}}
    @media (min-width:533px) and (max-width:540px){ html{ font-size:20px;}}
    @media (min-width:524px) and (max-width:532px){ html{ font-size:19.66px;}}
    @media (min-width:515px) and (max-width:523px){ html{ font-size:19.33px;}}
    @media (min-width:506px) and (max-width:514px){ html{ font-size:19px;}}
    @media (min-width:497px) and (max-width:505px){ html{ font-size:18.66px;}}
    @media (min-width:488px) and (max-width:496px){ html{ font-size:18.33px;}}
    @media (min-width:480px) and (max-width:487px){ html{ font-size:18px;}}
    @media (min-width:471px) and (max-width:479px){ html{ font-size:17.66px;}}
    @media (min-width:462px) and (max-width:470px){ html{ font-size:17.33px;}}
    @media (min-width:453px) and (max-width:461px){ html{ font-size:17px;}}
    @media (min-width:444px) and (max-width:452px){ html{ font-size:16.66px;}}
    @media (min-width:435px) and (max-width:443px){ html{ font-size:16.33px;}}
    @media (min-width:426px) and (max-width:434px){ html{ font-size:16px;}}
    @media (min-width:417px) and (max-width:425px){ html{ font-size:15.66px;}}
    @media (min-width:408px) and (max-width:416px){ html{ font-size:15.33px;}}
    @media (min-width:400px) and (max-width:407px){ html{ font-size:15px;}}
    @media (min-width:391px) and (max-width:399px){ html{ font-size:14.66px;}}
    @media (min-width:382px) and (max-width:390px){ html{ font-size:14.33px;}}
    @media (min-width:374px) and (max-width:381px){ html{ font-size:14px;}}
    @media (min-width:365px) and (max-width:373px){ html{ font-size:13.66px;}}
    @media (min-width:356px) and (max-width:364px){ html{ font-size:13.33px;}}
    @media (min-width:347px) and (max-width:355px){ html{ font-size:13px;}}
    @media (min-width:338px) and (max-width:346px){ html{ font-size:12.66px;}}
    @media (min-width:329px) and (max-width:337px){ html{ font-size:12.44px;}}
    @media (max-width:328px){ html{ font-size:12px;}}

3.如果有更加多好的想法和建议，留下你的评论，让更加多人看到移动端布局应该怎么去改进，指出不足之处，我会加以改进并说明~
    
    4.最后：或者这里换算有些麻烦，要用计算机器去计算，当然，当你掌握了这种布局方式，移动布局会用的很爽！
    ————————————————
    版权声明：本文为CSDN博主「唐策」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
    原文链接：https://blog.csdn.net/qq_29132907/article/details/78296734