web-dev-qa-db-fra.com

Comment coder les requêtes multimédia CSS ciblant TOUS les appareils mobiles et les tablettes?

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

@media only screen and (max-device-width: 768px) {
/* Styles */
}

C'est ce que j'ai jusqu'ici. La maquette PSD du site mobile sur lequel je travaille a une largeur de 640 pixels. L’autre, la version tablette du site, contient 768 pixels. J'ai pu tester le site dans mon navigateur Web en utilisant uniquement max-width, mais il est maintenant temps de faire en sorte que ce site fonctionne sur les périphériques et qu'il affiche toujours la page Web normale en taille réelle. Les deux questions ci-dessus sont ma meilleure hypothèse. Où vais-je mal?

css3responsive-designmedia-queries
25
user1666487

Cela peut être fait avec des requêtes multimédia de niveau 4: ( Le support du navigateur est assez bon - CaniUse )

Fonctionnalités d'Interaction Media

L'idée ici est de cibler les périphériques en fonction de leurs capacités. (comme indiqué, vérifier la taille ou résolution de l'appareil qui a tendance à être des cibles en mouvement) 

Le pointeur fonction multimédia interroge la qualité du mécanisme de pointeur utilisé par le périphérique.

La fonction hover media interroge l’utilisateur sur sa capacité à survoler des éléments de la page avec un périphérique donné.

Donc, pour répondre à la question ...

Les appareils/tables mobiles sont similaires en ce sens que:

1) La précision du mécanisme d’entrée principal de l’appareil est limitée.

Cela signifie que nous pourrions utiliser la requête multimédia suivante:

@media (pointer:coarse) {
    /* custom css for "touch targets" */
}


div {
  width: 400px;
  height: 200px;
  color: white;
  padding: 15px;
  font-size: 20px;
  font-family: Verdana;
  line-height: 1.3;
  background: green;
}
@media (pointer:coarse) { 
  div {
    background: red;
  }
}
<h2>The <a href="https://www.w3.org/TR/mediaqueries-4/#pointer">pointer media feature</a> queries the quality of the pointer mechanism used by the device.</h2>
<div>The background here will be green on 'desktop' (devices with an accurate pointing mechanism such as a mouse) and red on 'mobile' (devices with limited accuracy of primary input mechanism) </div>

Démo Codepen

2) Le système de pointage principal ne peut pas se déplacer

Notre requête média ressemblerait à ceci:

@media (hover: none) { 
   /* custom css for devices where the primary input mechanism cannot hover 
   at all or cannot conveniently hover
}

NB: Avant la version 59, Chrome/Android nécessitait la valeur on-demand pour les requêtes multimédias avec ou sans survol. Cette valeur a ensuite été supprimée de la spécification et n'est plus requise par Chrome à partir de la version 59 . Donc, pour prendre en charge les anciennes versions d'Android, vous devez

@media (hover:none), (hover:on-demand) { 
  /* custom css for "touch targets" */
}


div {
  width: 400px;
  height: 150px;
  color: white;
  padding: 15px;
  font-size: 20px;
  font-family: Verdana;
  line-height: 1.3;
  background: green;
}
@media (hover:none), (hover:on-demand){ 
  div {
    background: red;
  }
}
<h2>The <a href="https://www.w3.org/TR/mediaqueries-4/#hover">hover media feature</a> queries the user’s ability to hover over elements on the page</h2>
<div>The background here will be green on 'desktop' (devices which support hover) and red on 'mobile' (devices which don't [easily] support hover ) </div>

Démo Codepen

NB:

Même si vous deviez connecter une souris à un téléphone portable/une tablette, la fonctionnalité de média de survol correspond toujours à none puisque leur mode d'interaction primary ne prend pas en charge le survol. 

Si nous voulons prendre en considération les périphériques {secondaires} _, nous pourrions utiliser les fonctions any-pointeur et any-hover

Donc, si nous voulions que les appareils mobiles connectés avec un périphérique de pointage soient traités comme des "ordinateurs de bureau", nous pourrions utiliser les éléments suivants:

@media (any-hover: hover) { ... }

Lecture supplémentaire

23
Danield

Au lieu d'utiliser des largeurs spécifiques au départ, ou de déconner avec des orientations, ou tout autre non-sens, je suggère d'utiliser la balise média suivante ...

@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
  /* Your touch-specific css goes here */
}
@media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
  /* Your click-specific css goes here */
}

Et pour quoi utilisez-vous ces balises? Pour définir des éléments pour les événements survolés et cliqués vs tactiles. 

Les périphériques tactiles, autres que quelques périphériques situés dans les zones grises mentionnées ci-dessus, ont une résolution très différente de celle des périphériques de bureau. Ne pas faire cela pour définir des éléments de conception, mais des éléments de navigation. Certains pudents peuvent se plaindre qu'une folie avec max-width est peut-être mieux, mais il y a tellement de téléphones HD qu'il est ridicule que device-max-width devienne rapidement inutile.

Cependant, vous devriez utiliser des requêtes de largeur de média. Cependant, ne vous embêtez pas avec max-device-width, seulement max-width & min-width. Laissez les balises ci-dessus des adresses tactiles et non tactiles, laissez une adresse min-largeur ou max-largeur en fonction de la taille de la fenêtre et ajustez le site visuels . 

En outre, utiliser l’orientation pour déterminer s’il est mobile ou non est simplement idiot, car même les moniteurs peuvent être placés dans différentes orientations (une configuration courante que j’ai vue pour les moniteurs à trois écrans est un moniteur à centre de portrait et des moniteurs côté paysage. 

Pour les vues en largeur, concentrez-vous sur le nettoyage de votre site sur différentes largeurs, en ignorant quel type d'appareil y accède réellement. Assurez-vous simplement que votre écran affiche proprement en différentes tailles. C'est un bon design qui s'applique à la fois aux ordinateurs de bureau et aux mobiles. S'ils ont votre site dans une petite fenêtre dans le coin supérieur gauche de leur écran pour référence (ou distraction rapide) tout en utilisant la majorité de leurs biens à l'écran ailleurs, et que ce soit pour eux, ainsi que pour les utilisateurs mobiles, que votre de plus petites largeurs sont construites pour. Essayer autre chose, c'est rapidement emprunter une voie très pénible et vouée à l'échec pour le développement Web. Donc, pour les largeurs plus petites, vous pouvez définir vos largeurs comme bon vous semble, mais je vais en inclure quelques-unes que j'aime personnellement.

Donc, tout à fait, vous devriez avoir quelque chose comme ça ...

@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
    #touch_logo {
       display: inherit;
    }
    #mouse_logo {
       display: none;
    }
  /* Your touch-specific css goes here */
}
@media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
    #touch_logo {
       display: none;
    }
    #mouse_logo {
       display: inherit;
    }
  /* Your click-specific css goes here */
}
@media (min-width: 541px){
  /* Big view stuff goes here. */
}
@media (max-width: 540px) and (min-width: 400px){
  /* Smaller view stuff goes here. */
}
@media (max-width: 399px){
  /* Stuff for really small views goes here. */
}

Cependant, n'oubliez pas d'inclure les éléments suivants dans l'en-tête de votre page:

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

Cela peut encore se produire dans certains cas, mais cela devrait être plus concis et plus complet que de nombreuses autres solutions.

6
liljoshu

Vous avez vos principaux styles de bureau dans le corps du fichier CSS (1024 pixels et plus), puis pour des tailles d'écran spécifiques:

@media all and (min-width:960px) and (max-width: 1024px) {
  /* put your css styles in here */
}

@media all and (min-width:801px) and (max-width: 959px) {
  /* put your css styles in here */
}

@media all and (min-width:769px) and (max-width: 800px) {
  /* put your css styles in here */
}

@media all and (min-width:569px) and (max-width: 768px) {
  /* put your css styles in here */
}

@media all and (min-width:481px) and (max-width: 568px) {
  /* put your css styles in here */
}

@media all and (min-width:321px) and (max-width: 480px) {
  /* put your css styles in here */
}

@media all and (min-width:0px) and (max-width: 320px) {
  /* put your css styles in here */
}

Cela couvrira à peu près tous les périphériques utilisés - je me concentrerai sur le style approprié pour les tailles en fin de gamme (par exemple, 320, 480, 568, 768, 800, 1024), comme pour tous les autres modèles. sensible à la taille disponible.

En outre, n'utilisez pas le px n'importe où - utilisez em ou%

0
Rahi.Shah