我试图对我的应用程序强制使用“横向”模式,因为我的应用程序绝对不是针对“人像”模式设计的。我怎样才能做到这一点?
现在可以使用HTML5 Webapp清单。 见下文。
原始答案:
您不能将网站或Web应用程序锁定在特定方向。它违反了设备的自然行为。
您可以使用CSS3媒体查询来 检测 设备方向,如下所示:
@media screen and (orientation:portrait) { // CSS applied when the device is in portrait mode } @media screen and (orientation:landscape) { // CSS applied when the device is in landscape mode }
或通过绑定JavaScript方向更改事件,如下所示:
document.addEventListener("orientationchange", function(event){ switch(window.orientation) { case -90: case 90: /* Device is in landscape mode */ break; default: /* Device is in portrait mode */ } });
2014年11月12日更新:HTML5 Webapp清单现在可以实现。
如html5rocks.com所述,您现在可以使用manifest.json文件强制定位模式。
manifest.json
您需要将这些行包括到json文件中:
{ "display": "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */ "orientation": "landscape", /* Could be "landscape" or "portrait" */ ... }
并且您需要像这样将清单包含到您的html文件中:
<link rel="manifest" href="manifest.json">
不能完全确定webapp清单中支持定向模式的支持,但是Chrome肯定存在。有信息时将更新。