Section CSS
Tout d'abord, créez une nouvelle classe pour le jugement, puis utilisez des requêtes multimédias pour attribuer différentes valeurs à l'attribut Z-Index de cette classe. Cette classe n'est utilisée que comme lecture JavaScript, il doit donc être déplacé de la fenêtre de l'écran afin que le spectateur soit invisible pour éviter des situations inattendues.
En démonstration, le code suivant définit quatre statuts de périphérique: version normale de bureau, version de bureau à petit écran, version de tablette et version mobile.
/ * État par défaut * /. Indicateur d'état {position: absolue; en haut: -999em; Gauche: -999em; z-index: 1;} / * petit bureau * / @ media tout et (max-width: 1200px) {.state-indicator {z-index: 2; }} / * tablette * / @ media all et (max-width: 1024px) {.state-indicator {z-index: 3; }} / * téléphone mobile * / @ media all et (max-width: 768px) {.state-indicator {z-index: 4; }}Jugement javascript
CSS est déjà en place, vous devez donc utiliser JavaScript pour générer un objet DOM temporaire, puis définir la classe correspondante pour elle, puis lire la valeur d'indice Z de cet objet. La méthode d'écriture native est la suivante:
// Créer l'indicateur d'état-indicateur ElementVar = document.CreateElement ('div'); indicator.classname = 'State-Indicator'; document.body.ApendChild (indicateur); // Créer une méthode qui renvoie le périphérique StateFonction GetDeviciState () {Return ParseInt 10);} getDeviceState () La fonction renvoie la valeur de l'index z. Afin d'améliorer la lisibilité, vous pouvez utiliser les fonctions de commutation pour standardiser la sortie: fonction getDeviceState () {switch (parseInt (window.getCompuledStyle (indicateur) .getPropertyValue ('z-index'), 10)) {case 2: return 'small-desktop'; casser; Cas 3: Retour «tablette»; casser; Cas 4: Renvoyez le «téléphone»; casser; par défaut: return 'Desktop'; casser; }}De cette façon, vous pouvez utiliser le code suivant pour déterminer l'état de l'appareil, puis exécuter le code JavaScript correspondant:
if (getDeviceState () == 'Tablet') {// Code JavaScript exécuté sous la tablette}Si vous utilisez jQuery ici, utilisez simplement le code suivant:
$ (function () {$ ('body'). append ('<div> </div>'); function getDeviceState () {switch (parseInt ($ ('. État-indicateur'). CSS ('z-index'), 10)) {case 2: return 'small-desktop'; Break; Break 3: Return 'tablet'; Break; case 4: return '; «Desktop»;Créez d'abord, puis obtenez et supprimez enfin ce nœud. L'appareil spécifique sera sorti dans votre console. Cliquez ici pour voir la démo. Vous pouvez essayer de faire glisser la bordure du milieu et de cliquer sur l'exécution.