Bonjour à tous,
Je viens de changer de smartphone et mon design n’est plus adapté à mon ancien téléphone.
J’ai modifié mon design actuel pour qu’il soit adapté à mon nouveau téléphone (448x998) et je n’ai aucun problème sur celui-ci.
Maintenant, je souhaite l’adapter à un téléphone qui est en 412x915.
J’ai donc modifié le code à l’aide de ce post le html dans le menu.
Hors, je suis obligé de me déplacer à droite et en bas pour voir l’intégralité de la page.
Comment faire ?
Merci pour votre aide.
Mathieu
<html>
<head>
<meta charset="utf-8">
<meta id="jeedomViewport" name="viewport" content="width=device-width,heigh=device-heigh,user-scalable=0," />
<script>
// Récupération de l'élément viewport
var mvp = document.getElementById('jeedomViewport');
// Vérification de la largeur de l'écran
if (screen.width < 448) {
// Calcul de l'échelle en fonction de la largeur de l'écran
var scaleX = screen.width / 448;
// Définition du contenu du viewport avec la nouvelle échelle
mvp.setAttribute('content', 'width=device-width, initial-scale=' + scaleX + ', user-scalable=no');
//mvp.setAttribute('content', 'width=device-width, initial-scale=' + scaleX + ', maximum-scale=' + scaleX + ', user-scalable=no');
}
</script>
<style>
/* Cache la barre latérale de défilement sur mobile */
@media only screen and (max-width: 830px){
/* html,body {
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
body::-webkit-scrollbar {display: none; }
} */
html,body {
overflow-x: hidden;
-webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */
}
body::-webkit-scrollbar {display: none; }
}
</style>
</head>
</html>
