赵工的个人空间


网络课堂部分转网页计算部分转编程演练

 网页多终端兼容

首页 > 网络课堂 > 网页多终端兼容 > 检测屏幕宽高
检测屏幕宽度重定向页面

现在,多种手持设备可以打开网页,但手持设备有横屏和竖屏,且有不同的屏幕大小。为电脑显示屏使用的网页,在较宽的屏幕上可以正常显示,而在较窄的屏幕上显示就有可能不合适,这时往往就需要检测屏幕的宽度或高度,重定向到适合的页面来显示。示例:

if((screen.width<=800)&&(screen.height<=600)){
  window.location.replace('small.html');
}else{
  window.location.replace('large.html');
}

检测宽度时可能用到的其他一些宽高属性:

网页可见区域宽度: 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

Copyright@dwenzhao.cn All Rights Reserved   备案号:粤ICP备15026949号
联系邮箱:dwenzhao@163.com  QQ:1608288659