J'essaye de forcer le mode "paysage" pour mon application car mon application n'est absolument pas conçue pour le mode "portrait". Comment puis je faire ça?
J'essaye de forcer le mode "paysage" pour mon application car mon application n'est absolument pas conçue pour le mode "portrait". Comment puis je faire ça?
Réponses:
C'est désormais possible avec le manifeste webapp HTML5. Voir ci-dessous.
Réponse originale:
Vous ne pouvez pas verrouiller un site Web ou une application Web dans une orientation spécifique. Cela va à l'encontre du comportement naturel de l'appareil.
Vous pouvez détecter l'orientation de l'appareil avec des requêtes multimédias CSS3 comme ceci:
@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
}
Ou en liant un événement de changement d'orientation JavaScript comme celui-ci:
document.addEventListener("orientationchange", function(event){
switch(window.orientation)
{
case -90: case 90:
/* Device is in landscape mode */
break;
default:
/* Device is in portrait mode */
}
});
Mise à jour du 12 novembre 2014: c'est désormais possible avec le manifeste webapp HTML5.
Comme expliqué sur html5rocks.com , vous pouvez maintenant forcer le mode d'orientation à l'aide d'un manifest.jsonfichier.
Vous devez inclure ces lignes dans le fichier json:
{
"display": "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
"orientation": "landscape", /* Could be "landscape" or "portrait" */
...
}
Et vous devez inclure le manifeste dans votre fichier html comme ceci:
<link rel="manifest" href="manifest.json">
Je ne sais pas exactement quelle est la prise en charge sur le manifeste de l'application Web pour le mode d'orientation de verrouillage, mais Chrome est définitivement là. Mettra à jour lorsque j'aurai les informations.
screen.orientation.lock('landscape');
Le forcera à passer et à rester en mode paysage. Testé sur Nexus 5.
J'utilise des css comme celui-ci (basé sur des astuces 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;
}
}
landscapeà portraitet cela fonctionne comme prévu@media screen and (orientation: portrait)
portrait(afin qu'il puisse basculer vers landscape).
J'ai eu le même problème, c'était un fichier manifest.json manquant, s'il n'est pas trouvé, le navigateur décide avec l'orientation qui convient le mieux, si vous ne spécifiez pas le fichier ou utilisez un mauvais chemin.
J'ai corrigé le simple fait d'appeler le manifest.json correctement sur les en-têtes html.
Mes en-têtes 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">
Et le contenu du fichier 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"
}
}
Pour générer vos favicons et icônes, utilisez cet outil Web: https://realfavicongenerator.net/
Pour générer votre fichier manifeste, utilisez: https://tomitm.github.io/appmanifest/
Mon PWA fonctionne très bien, j'espère que cela vous aidera!