I'm trying to force the "landscape" mode for my application because my application is absolutely not designed for the "portrait" mode. How can I do that?
This question is related to
javascript
device-orientation
I use some css like this (based on css tricks):
@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;
}
}
I had the same problem, it was a missing manifest.json file, if not found the browser decide with orientation is best fit, if you don't specify the file or use a wrong path.
I fixed just calling the manifest.json correctly on html headers.
My html headers:
<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">
And the manifest.json file content:
{
"display": "standalone",
"orientation": "portrait",
"start_url": "/",
"theme_color": "#000000",
"background_color": "#ffffff",
"icons": [
{
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
}
To generate your favicons and icons use this webtool: https://realfavicongenerator.net/
To generate your manifest file use: https://tomitm.github.io/appmanifest/
My PWA Works great, hope it helps!
screen.orientation.lock('landscape');
Will force it to change to and stay in landscape mode. Tested on Nexus 5.
Source: Stackoverflow.com