Obtenez de l'appareil largeur en javascript

Question

Est-il possible d'obtenir les utilisateurs de l'appareil largeur, par opposition à la largeur de la fenêtre d'affichage, à l'aide de javascript?

CSS media queries offrir ce que je peux dire

@media screen and (max-width:640px) {
    /* ... */
}

et

@media screen and (max-device-width:960px) {
    /* ... */
}

Ceci est utile si je suis ciblant les smartphones en orientation paysage. Par exemple, sur iOS une déclaration d' max-width:640px cible à la fois les modes paysage et portrait, même sur un iPhone 4. Ce n'est pas le cas pour Android, aussi loin que je peux dire, donc, à l'aide de device-width dans cette instance avec succès à la fois les objectifs des orientations, sans cibler les périphériques de bureau.

Cependant, si je suis en invoquant un javascript de liaison en fonction de l'équipement de la largeur, je semble être limitée à des tests de la fenêtre d'affichage de la largeur, ce qui signifie un test comme dans l'exemple suivant,

if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }

Cela ne semble pas élégant pour moi, compte tenu de l'indice que la largeur de l'appareil est disponible en css.

Answer 1

Vous pouvez obtenir le dispositif de la largeur de l'écran via l'écran.la largeur de la propriété.
Parfois, il est également utile pour l'utilisation de la fenêtre.innerWidth (pas généralement trouvé sur des appareils mobiles) au lieu de la largeur de l'écran lorsque vous traitez avec les navigateurs de bureau, où la taille de la fenêtre est souvent moins que le dispositif de la taille de l'écran.

Généralement, lorsque vous traitez avec les appareils mobiles ET les navigateurs de bureau, j'utilise le suivant:

 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

Answer 2

Un problème avec Bryan Rieger est utile de répondre, c'est que sur la haute-densité affiche, les appareils d'Apple rapport à l'écran.largeur en creux, tandis que les appareils Android de le signaler en physique pixels. (Voir http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html .) Je suggère d'utiliser if (window.matchMedia('(max-device-width: 960px)').matches) {} sur les navigateurs supportant matchMedia.

Answer 3

J'ai juste eu cette idée, alors c'est peut-être simpliste, mais il semble bien fonctionner et peut-être le plus cohérent entre vos CSS et JS.

Dans votre CSS, vous définissez le max-width valeur html basé sur le @media la valeur à l'écran:

@media screen and (max-width: 480px) and (orientation: portrait){

    html { 
        max-width: 480px;
    }

    ... more styles for max-width 480px screens go here

}

Puis, à l'aide de JS (probablement par l'intermédiaire d'un framework comme JQuery), cochez la case max-valeur de la largeur de la balise html:

maxwidth = $('html').css('max-width');

Maintenant, vous pouvez utiliser cette valeur pour conditionner les changements:

If (maxwidth == '480px') { do something }

Si mettre le max-width valeur de la balise html qui semble effrayant, alors peut-être que vous pouvez mettre sur une autre balise, qui est utilisé uniquement à cette fin. Pour mon objectif de la balise html fonctionne très bien et n'affecte pas ma balisage.