Utilisez des supports pour déterminer le problème rencontré dans la largeur de l'écran:
Sur iOS, je peux le faire lorsque je tourne l'écran, mais il n'a pas répondu sur Android. L'écran horizontal montre toujours mon style d'écran vertical.
Après avoir vérifié les informations, si les médias de CSS3 souhaitent avoir un meilleur effet d'affichage du côté mobile, vous devez ajouter ce code à l'en-tête de la page.
<meta name = "Viewport" content = "width = device-width, initial-scale = 1,0, maximum-scale = 1,0, user-échec = no">
Mais je ne peux pas utiliser ce code. Parce que ma page est adaptée. La taille de la police et la taille du style peuvent être affichées en fonction de la taille de l'écran. Si j'ajoute ce code, mon adaptation ne fonctionnera pas. Alors utilisez d'autres méthodes
Solution:
L'appareil mobile offre un événement d'événement: OrientationChange
Cet événement a été ajouté par Apple pour Safari. Afin que les développeurs puissent déterminer lorsque l'utilisateur passe l'appareil de la vue du paysage au mode de vue de portrait.
Cet événement sera déclenché lorsque l'appareil tourne.
// écoute pour l'orientation changewindow.addeventListener ("orientationchange", function () {// annoncer la nouvelle orientation notmatert (window.orientation);}, false);Tant que l'utilisateur modifie le mode d'affichage de l'appareil, l'événement OrientationChange sera déclenché. L'objet de l'événement pour le moment ne contient aucune information précieuse.
Parce que les seules informations pertinentes peuvent être accessibles via Window.
attribut d'orientation
Il a trois valeurs: 0,90, -90
0 est portrait, -90 signifie que l'appareil tourne horizontalement en mode paysage à droite, tandis que 90 signifie que l'appareil tourne horizontalement en mode paysage à gauche.
Il y en a un autre qui est 180, ce qui signifie l'écran vertical mais est un mode d'écran vertical inversé. Mais ce modèle n'a pas encore été pris en charge.
Comme indiqué sur la figure:
Par conséquent, en combinant cet événement d'orientation d'orientation et la propriété d'orientation de la fenêtre, il est plus facile pour nous de déterminer si l'appareil est dans un écran horizontal ou vertical.
(function () {var init = function () {var updateOrientation = function () {var orientation = window.orientation; switch (orientation) {cas 90: case -90: orientation = 'paysage'; // ici est une rupture horizontale; par défaut: orientation = 'portrait'; // Ici Ajouter la pause;} // Screen //plusportDocument.body.parentNode.setAttribute('class',Oorientation);} ;// Cet événement est appelé pour chaque rotation.Par conséquent, la classe peut être ajoutée en fonction des différents états de rotation, afin que notre CSS puisse être écrit comme celui-ci
/ ** Le corps de performance montre le rouge ** /. Portrait Body Div {Background: Red;} / ** Handwidth Body montre bleu ** /. Corps de paysage Div {Background: Blue;}Une autre façon d'écrire est d'utiliser les requêtes multimédias
@media all et (orientation: portrait) {body div {background: red;}} @media all and (orientation: paysage) {body div {background: bleu; }}Cette requête multimédia d'orientation fonctionne sur iOS3.2 + et Android 2.0+.
Relativement parlant, ce type de code est un peu plus concis. Avec le JS + CSS ci-dessus, ce type de code est un CSS pur. Lorsque l'appareil tourne, le CSS qui modifie la direction sera appelé en fonction de la direction de l'appareil tourné.
compatibilité
Certains appareils ne fournissent pas d'événement OrientationChange, mais ne déclenchent pas l'événement de redimensionnement de la fenêtre. Et si les requêtes avec les médias ne les soutiennent pas, que devons-nous faire?
Il peut être jugé par l'événement de redimensionnement. Utilisez Innerwidth et Innerheight pour récupérer la taille de l'écran. À en juger par la comparaison de la largeur et de la hauteur, la largeur et la hauteur sont des écrans verticaux, et la largeur et la hauteur sont des écrans horizontaux.
Le code est le suivant:
(function () {var updateOrientation = function () {var orientation = (window.innerwidth> window.innerHeight)? 'Landscape': 'portrait'; document.body.parentNode.SetAttribute ('class', orientation);}; var init = function () {updateORENTATION (); // Écoutez l'événement Resize window.addeventListener ('redimensi', updateOrientation, false);}; window.addeventListener ('domContentloaded', init, false);}) ();De cette façon, nous pouvons voir les changements de style apportés par la rotation d'écran dans le navigateur.
La combinaison des deux méthodes de détection est la suivante:
(function () {var supportOrientation = (typeof window.orientation === 'nombre' && type window.onorientationchange === 'objet'); var init = function () {var htmlnode = document.body.parentNode, orientation; -90: orientation = 'paysage'; pause; par défaut: orientation = 'portrait'; break;}} else {orientation = (window.innerwidth> window.innerheight)? 'portrait';} htmlnode.setAttribute ('class', orientation);}; if (supportOrientation) {window.addeventListener ('orientationchange', UpdateOrientation, false);} else {// écoute l'événement de réssification window.addeventListener ('redimensi', updateOrientation, false);} updateORIENTATION ();}; window.addeventListener ('domContentSoaded', init, false);}) ();En utilisant cette méthode, vous pouvez résoudre la détection d'écran horizontale et verticale ennuyeuse des appareils mobiles.