Comment appliquer l'orientation paysage sur un site Web mobile ?

Site mobile : appliquer l'orientation paysage uniquement

Comment empêcher la rotation automatique et forcer l'orientation paysage sur un site Web mobile ? Cette question se pose lors du développement d'un site avec une approche « mobile first ».

Pour résoudre ce problème, des requêtes multimédias peuvent être utilisées. L'extrait de code CSS suivant illustre l'implémentation :

<link rel="stylesheet" type="text/css" href="css/style_l.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">

Dans le code fourni, deux feuilles de style distinctes sont spécifiées.

• style_l.css : cette feuille de style est appliquée lorsque l'écran est en orientation paysage. Elle contient les styles nécessaires pour afficher le contenu dans la disposition paysage souhaitée.
• style_p.css : Cette feuille de style est appliquée lorsque l'écran est en orientation portrait. Il peut être utilisé pour masquer ou désactiver des éléments spécifiques ou afficher un message indiquant que l'application est conçue pour le mode paysage uniquement.

En mettant en œuvre cette approche, vous pouvez vous assurer que votre site mobile est verrouillé en mode paysage. orientation, empêchant les utilisateurs de faire pivoter accidentellement leurs appareils et de rencontrer potentiellement une interface déformée ou inutilisable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!