Il n'y a pas longtemps, j'ai fait un projet H5 et j'avais besoin de faire un certain traitement lorsque l'écran horizontal et vertical change. Il ne fait aucun doute que l'OrientationChange doit être utilisé pour surveiller les changements dans les écrans horizontaux et verticaux.
Plan 1:
// écoute l'orientation changewindow.addeventListener ("orientationchange", fonction (événement) {// juger des écrans horizontaux et verticaux basés sur event.orientation | screen.orientation.ang est égal à 0 | 180, 90 | -90 degrés}, false);Une fois le code ajouté, il existe divers problèmes de compatibilité. Des problèmes de compatibilité se produisent ici à deux endroits:
OrientationChange
event.orientation | screen.orientation.angle
Ce qui suit est la compatibilité de l'événement OrientationChange:
Ce qui suit est la compatibilité de l'écran.
Plan 2:Le plan ci-dessus ne fonctionne pas, vous ne pouvez donc faire que d'autres méthodes. Google et apprenez qu'il peut être réalisé via le redimensionnement (Window.inner / OUTERWIDTH, Window.inner / OUTERHEIGHT):
window.addeventListener ("redimensi", function (event) {var orientation = (window.innerwidth> window.innerheight)? "paysage": "portrait"; if (oritentation === 'portrait') {// faire quelque chose…} else {// faire autre chose…}, false);Cette solution répond essentiellement aux besoins de la plupart des projets, mais il y a encore quelques lacunes:
Tant que la taille de la fenêtre change, l'événement de redimensionnement sera déclenché en continu. Vous pouvez utiliser SetTimeout pour optimiser
S'il y a plusieurs endroits qui doivent surveiller les écrans horizontaux et verticaux, vous devez enregistrer plusieurs windows.addeventListener ("redimensit", fonction (événement) {...}). Pouvez-vous l'améliorer via les modes d'abonnement et de publication? Enregistrez uniquement un redimensionnement pour surveiller les changements dans les écrans horizontaux et verticaux et publiez des notifications à l'objet souscrit tant que les changements horizontaux et verticaux se produisent. D'autres endroits qui doivent surveiller les écrans horizontaux et verticaux ne sont qu'un abonnement.
Le code clé est le suivant:
var resizecb = function () {if (win.innerwidth> win.innerheight) {// initialiser le jugement meta.init = 'paysage'; meta.current = 'paysage'; } else {meta.init = 'portrait'; meta.current = 'portrait'; } return function () {if (win.innerwidth> win.innerheight) {if (meta.current! == 'paysage') {meta.current = 'paysage'; event.trigger ('__ orientationchange__', meta); }} else {if (meta.current! == 'portrait') {meta.current = 'portrait'; event.trigger ('__ orientationchange__', meta); }}}}}}} ();Le code complet est cliqué ici
Plan 3:
Cependant, je pense personnellement que la mise en œuvre de Window.InnerWidth> Window.innerheight est une sorte de détection de pseudo, ce qui est un peu peu fiable. La détection peut-elle être obtenue via un navigateur? Ceci est basé sur la requête CSS3 @ Media Media.
Comme suit la compatibilité @media:
Comme le montre la figure ci-dessus, les navigateurs mobiles prennent en charge les médias CSS3.
Idées de mise en œuvre:
Créer un style CSS spécifique qui identifie l'état d'écran horizontal et vertical
Injecter le code CSS en pages via JS
La fonction de rappel redimensive obtient l'état de l'écran horizontal et vertical
Ici, je sélectionne le nœud Font-Family of <Html> </html> comme attribut de style de détection. Les raisons sont les suivantes:
Sélectionnez <html> </html> principalement pour éviter la reflux et la repeindre
Le style de police est principalement dû au fait que Font-Family a les caractéristiques suivantes:
De cette façon, nous pouvons spécifier un logo spécifique pour identifier l'état de l'écran horizontal et vertical, mais le logo spécifié doit être placé devant d'autres polices, de sorte que les modifications de la police HMTL ne seront pas provoquées.
Le code clé est le suivant:
// rappel var resizecb = function () {var hstyle = win.getCompupedStyle (html, null), ffstr = hStyle ['Font-Family'], pstr = "Portrait," + ffstr, lstr = "Landscape," + ffstr, // épisser CSS CSSStr = '@Media (orientation: @Portrait) {Portrait) {Portrait) {Portrait) {Portrait) {Portrait) . ORIENTATION {FONT-FAMILY: '+ PSTR +';}} @Media (Orientation: Landscape) {.Orientation {Font-Family: '+ Lstr +';}} '; // Style de charge LoadSylestring (CSSSTR); // Ajouter une classe html.classname = 'orientation' + html.classname; if (hStyle ['font-family'] === pstr) {// initialiser le jugement meta.init = 'portrait'; meta.current = 'portrait'; } else {meta.init = 'paysage'; meta.current = 'paysage'; } return function () {if (hStyle ['font-family'] === pstr) {if (meta.current! == 'portrait') {meta.current = 'portrait'; event.trigger ('__ orientationchange__', meta); }} else {if (meta.current! == 'paysage') {meta.current = 'paysage'; event.trigger ('__ orientationchange__', meta); }}}}}} ();Le code complet est cliqué ici
Résultats des tests
Effet de portrait:
Effet du paysage:
Plan 4:
Vous pouvez l'améliorer. Lorsque vous supportez l'orientation de l'orientation , utilisez l'OrientationChange native. Sinon, utilisez la solution 3.
Le code clé est le suivant:
// si l'événement OrientationChange est pris en charge Isorientation = ('Orientation' dans Window && 'OnOriientationChange' dans Window); // CallBackVar OrientationCB = fonction (e) {if (win.orientation === 180 || orientation === 0) {meta.init = 'portrait'; meta.current = 'portrait'; } if (win.orientation === 90 || win.orientation === -90) {meta.init = 'paysage'; meta.current = 'paysage'; } return function () {if (win.orientation === 180 || win.orientation === 0) {meta.current = 'portrait'; } if (win.orientation === 90 || win.orientation === -90) {meta.current = 'paysage'; } event.trigger (EventType, Meta); }}; var callback = isorientation? orientationcb (): (function () {resizecb (); return function () {timer && win.cleartimeout (timer); timer = win.setTimeout (resizecb, 300);}}) (); // écouter win.addeventListener (isorientation? EventType: 'resize', callback, false);Le code complet est cliqué ici
Plan 5:
À l'heure actuelle, les solutions ci-dessus sont toutes implémentées via des modes d'événements d'abonnement et de publication personnalisés. Ici, l'OrientationChange peut être simulé en fonction du mécanisme d'événement du navigateur. C'est-à-dire fixer l'incompatibilité de l'orientationchange.
Le code clé est le suivant:
var EventType = 'orientationchange'; // déclenchent natif orientationchangevar fire = function () {var e; if (document.createevent) {e = document.createEvent ('htmlevents'); E.Initevent (EventType, True, False); win.dispatchEvent (e); } else {e = document.createEventObject (); E.EventType = EventType; if (win [EventType]) {win [EventType] (); } else if (win ['on' + eventType]) {win ['on' + eventType] (); } else {win.fireevent (eventType, e); }}}Le code complet est cliqué ici
Grâce aux cinq solutions ci-dessus, j'ai une compréhension supplémentaire de la détection d'écran horizontale et verticale sur les terminaux mobiles. Je sais seulement pourquoi j'écris sur certaines choses moi-même après les avoir expérimentés moi-même. J'ai également enregistré les raisons de l'article, en espérant qu'ils seront utiles à tout le monde. Après cinq solutions qui ont évolué vers la dernière orientationchange-fix, Adresse GitHub: https://github.com/zhansingsong/orientationchange-fix
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.