screen.availWidth 返回浏览器窗口可占用的水平宽度(单位:像素).
1. screen
1.1 availHeight/Width
screen.availHeight 返回浏览器窗口在屏幕上可占用的垂直空间,即最大高度.
1.2 availLeft/Top
availTop:浏览器窗口在屏幕上的可占用空间上边距离屏幕上边界的像素值.
availLeft:返回浏览器可用空间左边距离屏幕(系统桌面)左边界的距离.
大多数情况下,该属性返回 0.
如果你在有两个屏幕的电脑上使用该属性,在右侧屏幕计算该属性值时,返回左侧屏幕的宽度(单位:像素),也即左侧屏幕左边界的 X 坐标.
在 Windows 中,该属性值取决于哪个屏幕被设为主屏幕,返回相对于主屏幕左边界的 X 坐标.就是说,即使主屏幕不是左侧的屏幕,它的左边界的 X 坐标也是返回 0.如果副屏幕在主屏幕的左侧,则它拥有负的 X 坐标.
[1] [2] - 左屏幕 availLeft 返回 0,右侧的屏幕返回左侧屏幕的宽度
[2] [1] - 左侧屏幕 availLeft 返回该屏幕的 -width,右侧屏幕返回 0
1.3 colorDepth
colorDepth 属性返回目标设备或缓冲器上的调色板的比特深度.
相同的颜色在不同设备中,渲染的视觉色彩不同,可用该属性来进行调色.
if (screen.colorDepth <= 8)
//为8位屏幕的简单的蓝色背景色
document.body.style.background = "#0000FF"
else
//为现代屏幕的华丽的蓝色背景色
document.body.style.background = "#87CEFA"
1.4 pixelDepth
返回屏幕的位深度 / 色彩深度(bit depth).根据 CSSOM(CSS 对象模型) 视图,为兼容起见,该值总为 24.
height 返回屏幕的高度(单位:像素).注意,该属性返回的高度值并不是全部对浏览器窗口可用.小工具(Widgets),如任务栏或其他特殊的程序窗口,可能会减少浏览器窗口和其他应用程序能够利用的空间.
// 如果没有足够的位深度/色彩深度(bit depth),就选择一个更纯的颜色
if (window.screen.pixelDepth > 8) {
document.style.color = "#FAEBD7";
} else {
document.style.color = "#FFFFFF";
}
1.5 width / height
当返回屏幕高度时,IE 会考虑缩放设置.只有当缩放比例为 100% 时,IE 才会返回真实的屏幕高度.
width 返回屏幕的宽度.注意,该属性返回的宽度值不一定就是浏览器窗口可使用的宽度.当有其他小工具占据了屏幕空间时,浏览器有时不能占用小工具(如任务栏)占据的空间.window.screen.width 和 window.screen.availWidth 两者不同.相关属性 window.screen.height.
在返回该值时,IE 会考虑缩放设置.只有在缩放比例为 100% 时,IE 才返回真实的屏幕宽度.
表示当前屏幕是横屏(landscape-primary)还是竖屏(portrait-primary).只读属性.orientation.type 还有两个值 landscape-secondary 和 portrait -secondary.值 portrait-secondary 将横屏模式旋转 180°
1.6 orientation[H5]
type
角度为 0 等同于自然方向,大部分智能手机的自然方向是 portrait-primary;
var orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
if (orientation.type === "landscape-primary") {
console.log("横屏.");
} else if (orientation.type === "landscape-secondary") {
console.log("横屏(另外一个方向.注:横屏有两个方向)");
} else if (orientation.type === "portrait-secondary" || orientation.type === "portrait-primary") {
console.log("竖屏");
}
angle
90° 等同于 landscape-primary;
180° 等同 portrait-secondary;
270° 等同 landscape-secondary.
不同的设备,angle 代表不同的关键字.为了获取方向值,浏览器需要运行在全屏模式下.
lock/unlock
通过 screen.orientation 属性的 lock() 方法可以调整屏幕方向,其默认值是 any,这允许设备根据其物理方向来应用任何方向.值"natural" 将在设备的自然方向上显示网站,因设备而异.智能手机通常使用横屏,平板则使用竖屏.
screen.orientation.lock("natural");
上面的示例中,为设备设置自然方向.
当然,Screen Orientation API 也允许你定义一个独立的方向,其有四个值可以选择,这已经包含了移动设备所有可能的方向.这四个值分别是: "portrait-primary", "portrait-secondary", "landscape-primary" 和 "landscape-secondary".
change 事件
通过 change 事件改变屏幕方向也是可以的,只需要调用 addEventListener() 为 orientation 属性注册 change 事件并添加一个函数(作为事件处理程序).
每一次屏幕方向的改变都会触发弹框,显示当前的方向关键字和角度.
screen.orientation.addEventListener("change", function(e) {
alert(screen.orientation.type + " " + screen.orientation.angle);
}, false);
当使用 Screen Orientation API 时,还需要记住一件事:由于要 Fullscreen API 一起使用才能起作用,所以不应该使用它来设计网站之类的.对于需要全屏模式的浏览器游戏或其他应用程序,它能有更好的效果.
详细使用方式可参见下列网站: html5 Screen Orientation API 实现横屏或竖屏 .
来源: https://www.cnblogs.com/ndos/p/8245164.html