Comment détecter la taille de l'écran pour le responsive web design?

J'ai googlé ce et a obtenu un quirksmode site qui vous donne la taille de votre écran. Tirant sur le haut de la console je vois que screen.width et screen.height sont disponibles directement à partir de la fenêtre de l'objet.

Je veux faire de la détection en pure JavaScript pour commencer. Puis-je utiliser cette propriété sur tous les appareils et navigateurs mobiles, tablettes, PC et Chrome, Safari, IE, Firefox.

Je n'ai pas de soins sur le port de la vue en train de re-dimensionnement de l'etc. Juste la taille réelle de l'écran qui ne change pas.

J'espérais qu'il y a une propriété unique j'ai pu vérifier à travers les dispositifs et les navigateurs.

Voici quelques infos générales par wikipedia sur le responsive web design.

"Je veux le faire en JavaScript pour commencer." — Ne fais pas ça. CSS à la place.
Ma question est - How to detect screen size for responsive web design? - puis-je utiliser les media queries pour obtenir cette valeur?
— Pourquoi je vous recommande de les utiliser si vous ne le pourrait pas?
RWD est fait avec mediaqueries dans 90% des webprojects. Il devient assez bordélique, très vite, en essayant de faire un responsive design avec javascript. Au moins utiliser un framework comme bootstrap ou similaire si vous voulez le faire uniquement avec du javascript.
Je vais probablement utiliser des requêtes de média, mais je veux connecter les dimensions x et y de chaque utilisateur sur l'écran lors de leur première connexion. C'est ce que je voulais dire par la prise en main avec JS. De cette façon, je peux caractériser quels écrans, je travaille avec avant d'écrire le CSS media queries.

OriginalL'auteur Zen-Lee Chai | 2015-07-01

  1. 4

    screen.width est la propriété vous cherchez.

    OriginalL'auteur

  2. 20

    Prendre un coup d'oeil à Obtenez de l'appareil largeur en javascript

    Requêtes de média travail en js:

    if (window.matchMedia('screen and (max-width: 768px)').matches) {}

    Une autre façon serait:

    var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    Mais ne sont pas pris en charge dans IE8 - malheureusement..

    OriginalL'auteur l0w_skilled

  3. 0

    C'est ce qui a fonctionné pour moi, après de longues pressentiment.
    Ces attributs ci-dessous fournissent sensible tailles en fonction de la nouvelle taille de tabulation.

    window.innerWidth
window.innerHeight

    OriginalL'auteur Karthik Sagar