屏幕定位API使用JavaScript来旋转屏幕

媒体查询允许的网站，这取决于智能手机或平板电脑的屏幕方向调整布局。但有时你可能想让你的网站锁定到一个特定的方向，纵向或横向。本地应用程序的格式可以在这种情况下，指定。该应用程序将只显示在预设的格式–独立于实际的定位装置。通过使用HTML5的屏幕定位API，你可以在JavaScript中定义屏幕方向。

定义一个文档的屏幕方向

屏幕方向可以通过screen.orientation财产和lock()方法调整。该方法的默认值是“任何”。这使得该设备适用于任何方向取决于设备的物理定位。值“自然”的网站显示在设备的自然取向，随设备的不同而不同。智能手机通常使用肖像模式，而片喜欢景观模式。

屏幕取向。锁具（“自然”）；
在上面的例子中，这套装置的自然取向。

当然，屏幕方向API还允许你定义一个个人取向。你可以选择之间的四个值，其中包括移动设备，所有可能的方向。这些是：“肖像，肖像”的主要“中等”，“景观主”，和“中学景观”。

屏幕取向。锁具（“像主”）；
同样，“中学景观”和“景观主要在180°旋转。

你也可以不用“主要”和“次要的”，并用“肖像”或“景观”为关键词。这使得该装置显示取向模式。

如果你想删除定义的取向，叫unlock()方法。

屏幕取向。解锁（）；
Advertisement

只为全屏幕模式

有通过screen.orientation定义定位要求。首先，通过lock()锁只能如果浏览器已经切换到全屏模式下通过requestfullscreen()。第二个要求是紧密相连的：第一种为全屏幕模式需要用户请求而不是自动启动，这适用于屏幕定位API，太。

因此，你应该绑定的方法点击事件的调用。

文件使用方（“按钮”）。注册侦听器（“点击”， 功能（） {文件文档元素]。requestfullscreen（）；屏幕取向。锁具（“像主”）；
 
 }， 假）；
在应用lock()方法启动全屏模式是很重要的，如上面的例子。结束的全屏幕模式将释放锁定位。

如果你在浏览器中，打开一个新文档为例，调用一个链接时，定义的取向随着全屏模式将终结。屏幕定位API只在当前HTML文档。

阅读取向

你不会总是想预定义取向。有时你只想知道一个智能手机或平板电脑的定位。在这种情况下，你可以让屏幕定位API读取方向。类型的属性显示一个定位关键词。

警报（屏幕取向。类型）；
但你也可以用角度属性显示的方位角。

警报（屏幕取向。角）；
0°角对应的自然倾向，这主要是“肖像主”智能手机。90°对应”景观小学”，180°“肖像中学”，和“270°中学景观”。这取决于设备的角度，可以代表不同的关键词。

为了查询定位，浏览器需要运行在全屏模式。

应对改变屏幕方向改变的事件也有可能通过。只需添加addeventlistener()和功能定位性能。

屏幕取向。注册侦听器（“改变”， 功能（E） {警报（屏幕取向。类型 + “” +屏幕取向。角）；
}， 假）；
定位的每个变化触发警报，这显示目前定位为关键词和角度。

浏览器支持

屏幕定位API支持Chrome和Opera 25 + 38 +供应商无前缀。当然，在移动设备上的API只能。你可以使用if语句来找出如果浏览器支持的API。

如果 （“定位” 进入屏幕） {…}
然后，您可以显示浏览器不支持将设备变成一个特定的方向 API的通知手动  。此外，桌面浏览器不支持的API不显示错误消息，如果是在这个查询API调用。

屏幕方向是相对较新的API。该API使用一些不同的方法名称的早期发展阶段。例如：lockorientation()代替lock()和unlockorientation()代替unlock()。你不应该使用旧名称为Chrome和Opera。

这些都是在Internet Explorer 11和Firefox 33 +支持；然而，他们需要适当的前缀–MS Internet Explorer，Firefox MOZ。

屏幕mslockorientation。锁具（“像主”）；屏幕mozlockorientation。锁具（“像主”）；
检测一个方向变化的事件的名称也不同于目前的API名称。而不是用“改变”，你需要使用“适当的前缀orientationchange”。

如果你想覆盖所有的浏览器，你没有选择，但同时使用，旧的和新的名字，并关注供应商前缀旧名称。

最后一件事你应该记住当使用屏幕定位API：它只能在全屏API，你不应该使用它的网站或类似的设计。它为浏览器游戏或其他需要全屏模式的应用更好。

• 牧羊人相关推荐：
• 网站设计文字编排的易读性
• HTML5网页设计创意欣赏
• 小日本优秀网页设计创意欣赏
• 推荐网页设计3本新书
• 网页设计图标免费下载