HTML5: Screen Orientation API
媒体查询允许网站根据智能手机和平板的方向来调整布局。但有时候你希网站锁定到一个特定的方向,横屏或竖屏,此时,原生应用的格式是可以被指定的。app只在预设格式下显示—独立于实际的设备方向。通过使用html5的 screen orientation api, 可以在javascript定义屏幕方向。
为一个文档定义屏幕方向
通过screen.orientation属性的lock()方法可以调整屏幕方向,其默认值是any,这允许设备根据其物理方向来应用任何方向。值”natural”将在设备的自然方向上显示网站,因设备而异。智能手机通常使用横屏,平板则使用竖屏。
screen.orientation.lock(natural);
上面的示例中,为设备设置自然方向。
当然,screen orientation api也允许你定义一个独立的方向,其有四个值可以选择,这已经包含了移动设备所有可能的方向。这四个值分别是: “portrait-primary”, “portrait-secondary”, “landscape-primary”和 “landscape-secondary”。
vc/yo7ogjmxkcxvvozxlbt5wb3j0cmfpdc1wcmltyxj5pc9lbt4mcmrxdw87lcambgrxdw87pgvtpnbvcnryywl0lxnly29uzgfyetwvzw0+jnjkcxvvoywgjmxkcxvvozxlbt5syw5kc2nhcgutchjpbwfyetwvzw0+jnjkcxvvo7rniczszhf1bzs8zw0+bgfuzhnjyxbllxnly29uzgfyetwvzw0+jnjkcxvvo6gjpgjyic8+dqq21npa1sfe3mrwu/qjrna1cg9ydhjhaxqtchjpbwfyebrn1rvuyxr1cmfsysfsu9h5tcsjrlkitcjnrnpaxkziz7e9z/kho9a1cg9ydhjhaxqtc2vjb25kyxj5vau64cbbxkpkvdd916oxodamzgvno6osy/ns1mno1sozycnosfc1xnfuylveo8q9yrgjrm341b6/tmbwwls8ulr1yrg137w5tcshozwvcd4ncjxwcmugy2xhc3m9"brush:java;">
screen.orientation.lock(portrait-primary);
同样,landscape-secondary和landscape-primary不同之处是前者将屏幕旋转了180°。
你也可以不用secondary和primary,仅适用landscape和portrait作为关键字,这将允许设备在两种方向模(portrait-primary、 portrait-secondary或landscape-primary、 landscape-secondary)式下显示。
如果想删除定义的方向,可以调用unlock()方法。
screen.orientation.unlock();
仅用于全屏模式
通过screen.orientation定义屏幕的方向有两个要求,第一:lock()方法仅在已经通过requestfullscreen()切换到全屏模式时起作用;第二:和第一点相关,由于全屏模式需要用户的许可,而不是自动切换,这同样适用于screen orientation api。
因此,对于点击事件,应该绑定这两种方法。
document.getelementbyid(button).addeventlistener(click, function() { document.documentelement.requestfullscreen(); screen.orientation.lock(portrait-primary); }, false);
调用lock()方法之前开启全屏模式是非常重要的,正如上面的例子。结束全屏模式将释放锁定的方向。
如果你在浏览器中打开了一个新文档,例如,当点击一个链接时,定义的方向将随着全屏模式同时结束。screen orientation api仅对当前文档有效。
读取orientation
不能总是预先确定方向,有时你仅想知道智能手机和平板的方向。这种情况下,可以使用screen orientation api读取方向,类型属性值是显示定位的关键字之一。
alert(screen.orientation.type);
使用angle属性还可以显示方向的角度
alert(screen.orientation.angle);
角度为0等同于自然方向,大部分智能手机的自然方向是portrait-primary;90°等同于landscape-primary;180°等同portrait-secondary;270°等同landscape-secondary。不同的设备,angle代表不同的关键字。
为了获取方向值,浏览器需要运行在全屏模式下。
通过change事件改变屏幕方向也是可以的,只需要调用addeventlistener()为orientation属性注册change事件并添加一个函数(作为事件处理程序)。
screen.orientation.addeventlistener(change, function(e) { alert(screen.orientation.type + + screen.orientation.angle); }, false);
每一次屏幕方向的改变都会触发弹框,显示当前的方向关键字和角度。
浏览器支持
screen orientation api在chrome 38+ and opera 25+不需要私有前缀,但 api仅能在移动设备上起作用。你可以使用一个if语句判断浏览器是否支持api
if (orientation in screen) { … }
screen orientation api是很新的api,api的早期发展阶段使用不同的方法名。例如:使用lockorientation()而不是lock(),使用unlockorientation()而不是unlock(),不应该在chrome and opera使用这些旧的方法名。
ie 11+和firefox 33+也支持screen orientation api,但需要对应的私有前缀
screen.mslockorientation.lock(portrait-primary); screen.mozlockorientation.lock(portrait-primary);
在ie 11+和firefox 33+中,检测方向变化的事件名也不同,你应该使用带对应前缀的orientationchange,而不是change.
当使用screen orientation api时,还需要记住一件事:由于要fullscreen api一起使用才能起作用,所以不应该使用它来设计网站之类的。对于需要全屏模式的浏览器游戏或其他应用程序,它能有更好的效果。
上一篇: 为什么这么臭
推荐阅读
-
HTML5关于上传API的一些使用(中)_html/css_WEB-ITnose
-
HTML5安全风险之API攻击详解
-
HTML5 API --- 跨文档消息(cross-document message)简介
-
HTML5 Storage API
-
HTML5 Canvas API速查手册
-
HTML5实现Notification API桌面通知功能
-
HTML5 Geolocation API的正确使用方法
-
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
-
使用HTML5 Canvas API中的clip()方法裁剪区域图像
-
HTML5的Geolocation地理位置定位API使用教程