[英]Force “landscape” orientation mode
我試圖為我的應用程序強制使用“橫向”模式,因為我的應用程序絕對不是為“縱向”模式設計的。 我怎樣才能做到這一點?
現在可以使用 HTML5 webapp manifest。 見下文。
原答案:
您不能將網站或 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 manifest。
如html5rocks.com上所述,您現在可以使用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 肯定在那里。 當我有信息時會更新。
screen.orientation.lock('landscape');
將強制它更改為並保持在橫向模式。 在 Nexus 5 上測試。
我使用一些這樣的 css(基於css 技巧):
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
html {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
height: 100vw;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0;
}
}
我有同樣的問題,它是缺少 manifest.json 文件,如果沒有找到瀏覽器決定方向是最合適的,如果你沒有指定文件或使用錯誤的路徑。
我修復了在 html 標頭上正確調用 manifest.json 的問題。
我的html標題:
<meta name="application-name" content="App Name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="manifest" href="manifest.json">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#">
<meta name="msapplication-TileColor" content="#">
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ffffff">
<link rel="shortcut icon" href="favicon.ico">
以及 manifest.json 文件內容:
{
"display": "standalone",
"orientation": "portrait",
"start_url": "/",
"theme_color": "#000000",
"background_color": "#ffffff",
"icons": [
{
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
}
要生成您的網站圖標和圖標,請使用此網絡工具: https ://realfavicongenerator.net/
要生成清單文件,請使用: https ://tomitm.github.io/appmanifest/
我的 PWA 效果很好,希望對您有所幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.