CSS media queries, la densité de pixel, de bureau et les appareils mobiles
Situation :
J'ai 5 fichiers CSS:
- de base.css avec certains styles qui s'appliquent partout
- 339px.css pour des largeurs allant jusqu'à 339px
- 639px.css pour des largeurs allant jusqu'à 639px
- 999px.css et
- bigscreen.css pour rien au-dessus de 999px largeur
Code :
<link rel="stylesheet" type="text/css" media="all" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 0px) and (max-width: 339px)" href="css/339px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 340px) and (max-width: 639px)" href="css/639px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 640px) and (max-width: 999px)" href="css/999px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)" href="css/bigscreen.css" />
Cela est bel et bon et se comporte parfaitement sur n'importe quel appareil, où 1 css pixel est égal à 1/96 de pouce (2,54 cm) sur l'écran de l'appareil. Récemment, cependant, de nombreux dispositifs d'affichage ont des densités de pixels beaucoup plus élevés, de sorte qu'ils s'appliquent, par exemple, le 639px.css lors de la 339px.css serait approprié. C'est un problème, que le contenu regarder façon trop petit.
Notez également que je ne peux pas utiliser le JavaScript et les ordinateurs de bureau devaient toujours obtenir le fichier css correspondant en fonction de la largeur, indépendamment de l'orientation.
Ce que je cherche à atteindre:
- 339px.css pour n'importe quel appareil avec:
- une largeur <=339px
- une haute résolution, mais un petit écran (par exemple mon smartphone android avec 1280x720 mais 5.7" écran) et en orientation portrait.
Bascially au lieu de pixel css, je veux un appareil qui est relatif à la densité de pixels de l'appareil (Bureau, tablette, smartphone, écrans 4k, "Retina" s'affiche, vous voyez l'idée) et fonctionne avec tous les principaux navigateurs mobiles et plates-formes de bureau.
En même temps, j'ai aussi besoin d'un secours à la css de pixels pour les anciens navigateurs.
Il m'a donné un mal de tête important d'arriver à cela. Comme je le comprends, vous pouvez utiliser le device-pixel-ratio
, mais je n'ai pas réussi à ne pas prendre les fichiers css de "chevauchement" à un certain point (un domaine où les deux fichiers css sont actifs, par exemple 339px.css et 639px.css).
Je suis à bout de ressources. J'ai essayé une combinaison de min-width
, max-width
, device-pixel-ratio
, orientation: portrait/landscape
requête des médias, mais cela a échoué en raison du fait que les ordinateurs de bureau ignorer l'orientation. Jusqu'à présent, je ne pouvais pas obtenir un résultat positif à travers les dispositifs, même si je n'ai pas écouté la prise en charge du navigateur exigence.
OriginalL'auteur Anpan | 2013-11-12
Vous devez vous connecter pour publier un commentaire.
Ajouter à votre
head
:<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width
prend de la densité de pixels en compte, donc un appareil avec une résolution de 640px de largeur et 2.0 densité de pixel aura un navigateur fenêtre d'affichage de la largeur de 320px. Échelle initiale assure les navigateurs mobiles ne tentez pas de zoom pour ajuster quoi que ce soit (pour de vrai de liquide de sites responsive).Je suis nouveau à l'ordinateur, de l'apprentissage que je vais... j'ai utilisé votre code et et fixe un tas de problèmes dans la tablette, mais j'ai reçu le téléphone cellulaire tout foiré, probablement parce que j'ai eu cette(-webkit-min-device-pixel-ratio: 2 - pour la media query) et c'était presque bon dans la cellule.. une suggestion?
Il dépend. Si votre site a une largeur fixe de la grille ou le papier d'emballage qui est censé zoom à l'échelle sur les petites fenêtres de visualisation (plutôt que d'un fluide réactif site dont la largeur s'adapte dynamiquement à toute fenêtre d'affichage de la largeur), cette fenêtre d'affichage de la balise meta entraînera le site de zoomer sur les petits navigateurs (depuis
initial-scale
est fixé à1.0
).OriginalL'auteur Ennui