Dois-je utiliser max-device-width et max-width?

Question

Avec les CSS media queries vous pouvez utiliser max-device-width à la cible une largeur de l'appareil (iPhone ou Android) et/ou un max-width qui vise une largeur de la page.

Si vous utilisez max-device-width, lorsque vous modifiez la taille de la fenêtre du navigateur sur votre bureau, le CSS ne changera pas, parce que votre bureau ne change pas de taille.

Si vous utilisez max-width, lorsque vous modifiez la taille de la fenêtre du navigateur sur votre bureau, vous pourriez être montré mobile orienté sur le style, tels que le touch-friendly éléments et les menus, et ce genre de chose.

Le ciblage spécifique des navigateurs (et périphériques?) est maintenant obsolète et vous devriez être un peu plus agnostique avec ce que vous ciblez. Cela s'applique aux demandes des médias trop?

Pourquoi voulez-vous cibler l'un sur l'autre? Qui est celui qui est recommandé?

Ceci est un exemple de requête de média que j'utilise sur un site de production:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {  
    /* Change a menu to fit the screen better, etc... */
}

J'ai tendance à utiliser les deux max-device-width et max-width.

Answer 1

J'ai lu qu'il n'est pas bon d'utiliser max-device-width le nombre exact de raisons que vous avez mentionnées.

Plutôt utiliser max/min-width, et de spécifier une fenêtre d'affichage.

<meta name="viewport" content="width=device-width, initial-scale=1">

---

En outre, les requêtes de média pris en charge par tous les appareils mobiles, la référence ici.

Cependant, c'est à dire 6-8 ne pas les soutenir.. une solution rapide à ce problème est l'utilisation de la suite ci-dessous vous de la feuille de style:

<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

C'est un poly-remplissage qui permettra à IE6-8 pour utiliser les media queries..

Answer 2

Si vous utilisez max-width, lorsque vous modifiez la taille de la fenêtre du navigateur sur votre bureau, vous pourriez être montré mobile orienté sur le style, tels que le touch-friendly éléments et les menus, et ce genre de chose.

C'est choquant pour moi, il semble être populaire d'avis que cela est souhaitable. Je n'ai pas compris si le liquide/liquide avant de le mobile a été considéré comme mauvais pour le mal ou les bonnes raisons. Il me semble que c'est juste un amateur de la version de mise en page liquide, mais que les concepteurs optent pour une raison quelconque.

Lors de la conception de la communauté au sens large a choisi de se mettre du côté des mises en page fixes de plus de liquide dans le milieu des années 2000, c'était parce que le texte s'ajuste nui à la lisibilité, ce qui entraîne souvent des veuves et des autres typogrphical artefacts. En outre, le maintien de la base de code est souvent délicat de la conception à la conception de conserver des éléments de collision etc. La seule différence entre les mises en page liquides et responsive design est que sensibles, grâce à une meilleure navigateurs et la prolifération de maçonnerie comme les cadres rendre plus facile à accomplir.

Personnellement, j'utilise la fonction min/max-device-width, car je préfère suivre de document de bureau des conventions qui ont des décennies de préséance. Pas tous les documents que vous ouvrez sur internet vont se comporter de cette manière sur un ordinateur de bureau, ni d'autres types de documents ou d'applications que vous chargez sur votre bureau. Pages conçu avant la domination de la téléphonie mobile, tout comme MS Word, Photoshop, etc. tenir leurs positions de défilement et de ne pas modifier leurs dispositions permettant aux utilisateurs de garder une trace de contenu dans le flux de page lors de l'exécution de la sans rapport avec la tâche de gestion de la fenêtre.

Je l'utilise généralement 3 points d'arrêt: une pour les téléphones, l'un pour la tablette et un pour le bureau. Le bureau et, souvent, au moins le paysage portrait sont fixes et la tablette portrait et ci-dessous sont à l'état liquide. Cette combinaison d'adaptation et de réponse permet à l'ordinateur de bureau de se comporter comme un site de bureau tout en me gardant d'nécessaires à la mise en page 10-bizarre distinct de largeur fixe à l'appareil mobile mises en page. Le texte ne soit pas redistribué sur les appareils mobiles, car la fenêtre ne peut pas être redimensionné.