您可以强制 Web 应用程序横向定位吗？

强制应用程序横向

问题： 强制应用程序以“横向”模式显示，尽管其设计为“纵向”模式，是一个经常出现的问题。如何实现这一点？

原始答案：

不幸的是，不可能将网站或 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 Web 应用程序清单的出现，强制定向模式现在是可能的。这可以通过以下方式实现：

• 创建一个 manifest.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">

请注意，对锁定方向的 Web 应用程序清单的支持可能会有所不同浏览器。

以上是您可以强制 Web 应用程序横向定位吗？的详细内容。更多信息请关注PHP中文网其他相关文章！