H5 horizontale und vertikale Bildschirmerkennungsmethode

In diesem Artikel werden hauptsächlich die zuverlässigeren horizontalen und vertikalen Bildschirmerkennungsmethoden vorgestellt, die einen gewissen Referenzwert haben.

Vor nicht allzu langer Zeit habe ich ein H5-Projekt erstellt, einige Verarbeitungsanforderungen Dies ist erforderlich, wenn sich die horizontalen und vertikalen Bildschirme ändern. Es besteht kein Zweifel, dass die Ausrichtungsänderung verwendet werden muss, um Änderungen in horizontalen und vertikalen Bildschirmen zu überwachen.

Option 1:

// 监听 orientation changes
window.addEventListener("orientationchange", function(event) {
 // 根据event.orientation|screen.orientation.angle等于0|180、90|-90度来判断横竖屏
}, false);

Nachdem der Code hinzugefügt wurde, treten verschiedene Kompatibilitätsprobleme auf. Kompatibilitätsprobleme treten hier an zwei Stellen auf:

orientationchange

event.orientation |screen .orientation.angle

Das Folgende ist die Kompatibilität des Orientierungsänderungsereignisses:

Das Folgende ist Bildschirmkompatibilität von .orientation:

Option 2:

Wenn die obige Lösung nicht funktioniert, müssen Sie eine andere finden Weg. Nach Google habe ich erfahren, dass dies durch Größenänderung (window.inner/outerWidth, window.inner/outerHeight) erreicht werden kann:

window.addEventListener("resize", function(event) {
var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";
if(oritentation === 'portrait'){
// do something ……
} else {
// do something else ……
}
}, false);

Diese Lösung erfüllt grundsätzlich die Anforderungen der meisten Projekte, es gibt jedoch noch einige Mängel:

Solange sich die Größe des Fensters ändert, wird das Größenänderungsereignis kontinuierlich ausgelöst. Sie können setTimeout zur Optimierung verwenden

Wenn Sie horizontale und vertikale Bildschirme an mehreren Stellen überwachen müssen, müssen Sie mehrere window.addEventListener("resize", function(event) {……}) registrieren. Kann es durch das Abonnement- und Veröffentlichungsmodell verbessert werden? Es wird nur eine Größenänderung registriert, um Änderungen im horizontalen und vertikalen Bildschirm zu überwachen. Das Objekt des Benachrichtigungsabonnements wird veröffentlicht. Für andere Orte, die horizontale und vertikale Bildschirme überwachen müssen, melden Sie sich einfach an.

Der Schlüsselcode lautet wie folgt:

var resizeCB = function(){
   if(win.innerWidth > win.innerHeight){//初始化判断
    meta.init = 'landscape';
    meta.current = 'landscape';
   } else {
    meta.init = 'portrait';
    meta.current = 'portrait';
   }
   return function(){
    if(win.innerWidth > win.innerHeight){
     if(meta.current !== 'landscape'){
      meta.current = 'landscape';
      event.trigger('__orientationChange__', meta);
     }
    } else {
     if(meta.current !== 'portrait'){
      meta.current = 'portrait';
      event.trigger('__orientationChange__', meta);
     }
    }
   }
  }();

Klicken Sie hier für den vollständigen Code

Option 3:

Aber ich persönlich Denken Sie, dass window.innerHeight durch window.innerWidth eine Pseudoerkennung implementiert, die etwas unzuverlässig ist. Ist es möglich, dies über einen Browser zu erkennen? Beispielsweise wird es basierend auf der CSS3@media-Medienabfrage implementiert.

Die folgende @media-Kompatibilität:

Wie im Bild oben gezeigt, unterstützen mobile Browser CSS3-Medien.

Implementierungsidee:

Erstellen Sie einen spezifischen CSS-Stil, der den horizontalen und vertikalen Bildschirmstatus identifiziert

Fügen Sie CSS-Code über JS in die Seite ein

Erhalten Sie den horizontalen und vertikalen Bildschirmstatus in der Rückruffunktion zur Größenänderung

Hier wähle ich die Knotenschriftfamilie von 100db36a723c770d327fc0aef2ce13b173a6ac4ed44ffec12cee46588e518a5e als Erkennungsstilattribut aus. Die Gründe sind wie folgt:

Wählen Sie 100db36a723c770d327fc0aef2ce13b173a6ac4ed44ffec12cee46588e518a5e hauptsächlich, um Reflow und Repaint zu vermeiden

Wählen Sie den Schriftfamilienstil, hauptsächlich weil Schriftart- Familie verfügt über die folgenden Funktionen:

• Priorisieren Sie die zuerst aufgeführten Schriftarten.

• Wenn die Schriftart nicht gefunden werden kann oder die Schriftart den darzustellenden Text nicht enthält, wird die nächste Schriftart verwendet.

• Wenn keine der aufgeführten Schriftarten Ihren Anforderungen entspricht, lassen Sie das Betriebssystem entscheiden, welche Schriftart verwendet werden soll.

Auf diese Weise können wir ein bestimmtes Logo angeben, um den Status der horizontalen und vertikalen Bildschirme zu identifizieren, aber das angegebene Logo muss vor anderen Schriftarten platziert werden, damit dies der Fall ist verursacht keine Änderungen in der HTML-Schriftart.

Der Schlüsselcode lautet wie folgt:

// callback
  var resizeCB = function() {
    var hstyle = win.getComputedStyle(html, null),
      ffstr = hstyle['font-family'],
      pstr = "portrait, " + ffstr,
      lstr = "landscape, " + ffstr,
      // 拼接css
      cssstr = '@media (orientation: portrait) { .orientation{font-family:' + pstr + ';} } @media (orientation: landscape) { .orientation{font-family:' + lstr + ';}}';
    // 载入样式    
    loadStyleString(cssstr);
    // 添加类
    html.className = 'orientation' + html.className;
    if (hstyle['font-family'] === pstr) { //初始化判断
      meta.init = 'portrait';
      meta.current = 'portrait';
    } else {
      meta.init = 'landscape';
      meta.current = 'landscape';
    }
    return function() {
      if (hstyle['font-family'] === pstr) {
        if (meta.current !== 'portrait') {
          meta.current = 'portrait';
          event.trigger('__orientationChange__', meta);
        }
      } else {
        if (meta.current !== 'landscape') {
          meta.current = 'landscape';
          event.trigger('__orientationChange__', meta);
        }
      }
    }
  }();

Klicken Sie hier für den vollständigen Code

Testeffekt

Porträteffekt:

Landschaftseffekt:

Option 4:

kann wieder verbessert werden, unterstützt Orientierungsänderung , verwenden Sie die native Ausrichtungsänderung. Wenn sie nicht unterstützt wird, verwenden Sie Option drei.

Der Schlüsselcode lautet wie folgt:

// 是否支持orientationchange事件
var isOrientation = ('orientation' in window && 'onorientationchange' in window);
// callback
var orientationCB = function(e) {
  if (win.orientation === 180 || win.orientation === 0) {
    meta.init = 'portrait';
    meta.current = 'portrait';
  }
  if (win.orientation === 90 || win.orientation === -90) {
    meta.init = 'landscape';
    meta.current = 'landscape';
  }
  return function() {
    if (win.orientation === 180 || win.orientation === 0) {
      meta.current = 'portrait';
    }
    if (win.orientation === 90 || win.orientation === -90) {
      meta.current = 'landscape';
    }
    event.trigger(eventType, meta);
  }
};
var callback = isOrientation ? orientationCB() : (function() {
  resizeCB();
  return function() {
    timer && win.clearTimeout(timer);
    timer = win.setTimeout(resizeCB, 300);
  }
})();
// 监听
win.addEventListener(isOrientation ? eventType : 'resize', callback, false);

Klicken Sie hier für den vollständigen Code

Option 5:

Derzeit ist der Die oben genannten Optionen sind alle. Dies wird durch angepasste Abonnement- und Veröffentlichungsereignismuster erreicht. Hier können Sie Orientierungsänderungen basierend auf dem Ereignismechanismus des Browsers simulieren. Damit soll die Inkompatibilität der Orientierungsänderung behoben werden.

Der Schlüsselcode lautet wie folgt:

var eventType = 'orientationchange';
// 触发原生orientationchange
var 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);
    }
  }
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist PHP chinesische Website!

Verwandte Empfehlungen:

HTML5 und jQuery realisieren intelligente Suchabgleichsfunktion

So rufen Sie die Freigabe auf der WeChat-HTML5-Seitenschnittstelle auf

Das obige ist der detaillierte Inhalt vonH5 horizontale und vertikale Bildschirmerkennungsmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!