原生js获取pc和移动端屏幕宽、高的方法

hermit-gyqy 2021-08-03 原文

pc端：　

　　var w = window.innerWidth
　　|| document.documentElement.clientWidth
　　|| document.body.clientWidth;
　　var h = window.innerHeight
　　|| document.documentElement.clientHeight
　　|| document.body.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


例：

<script type=”text/javascript”>
　　var w = window.innerWidth
　　|| document.documentElement.clientWidth //获取pc的宽，一般在pc上调试的时候用
　　|| document.body.clientWidth;
　　var h = window.innerHeight
　　|| document.documentElement.clientHeight //获取pc的高
　　|| document.body.clientHeight;

　　var w1 = window.screen.width //获取手机屏幕的宽，在实际上线的时候使用

　　window.onload = function(){
　　　　if(w < 415){
　　　　　　window.location.assign(\’tf/index.html\’);
　　　　}else{
　　　　　　window.location.assign(\’sh/index.html\’);
　　　　}

　　　　if(w1 < 415){
　　　　　　window.location.assign(\’tf/index.html\’);
　　　　}else{
　　　　　　window.location.assign(\’sh/index.html\’);
　　　　}

　　}

</script>