Media query pour la haute résolution mobile 1080px (Xperia Z, etc)

Je suis en train d'essayer de se familiariser avec les media queries pour les différents appareils. J'ai essayé mon nouveau Sony Xperia Z mobile et affiche en taille réelle site format en raison de la haute résolution. Comment puis-je ajouter un media query pour redimensionner une grille et le format standard des téléphones mobiles à l'échelle? Sur le Xperia la police est aussi trop petit pour lire et se doit de faire preuve de plus grand. Est-ce un problème de rétine dispositifs qui agissent comme la taille plein écran affiche?

Xperia Z - résolution 1920 × 1080 pixels, PPI 443

Comment puis-je inclure des requêtes de média pour de tels appareils?

OriginalL'auteur Daniel Kellaway | 2013-05-11

  1. 6

    Ce code vise tous les appareils avec le même ratio de pixel, qui est en fait ce dont vous avez besoin.

    @media screen and (-webkit-device-pixel-ratio:3) {
    body {font-size: 250%}
}

    Voici une liste de dispositifs et de leur device-pixel-ratio:
    https://www.google.com/fusiontables/DataSource?docid=1N_eJYR_topuk3xmrOeNhYEsST_LAJikGKKzOQ2o

    Merci, fonctionne très bien
    Je suis curieux de savoir pourquoi cela a été marqué vers le bas? Une explication serait qu'il nous aide tous à comprendre comment cette réponse peut être améliorée.
    Je n'ai pas vote", ce qui, toutefois je crois qu'il pourrait être pour quelques raisons: 1. Le vendeur, qui -webkit- préfixe, qui ne vise que les navigateurs WebKit. De l'opéra (pas sûr si son passage à WebKit signifie aussi la -o- préfixe est obsolète), Mozilla et Internet Explorer ne seraient pas visés par le présent, mais ils ont également l'utilisation des appareils mobiles. 2. Une approche plus appropriée aurait été d'utiliser min-resolution: 3dppx (le standard) au lieu de -webkit-min-device-pixel-ratio: 3. Je ne vois pas quoi d'autre pourrait avoir causé, car c'est une bonne réponse.
    Pour les téléphones sans une rmr, qu'aurions-nous utiliser? J'ai un LG G2.
    Le lien a été supprimé. Je pense que ce qu'on a la même info google.com/fusiontables/...

    OriginalL'auteur Timidfriendly

  2. 0

    Oui, ce serait un problème pour "retina dispositifs qui agissent comme de pleine taille de l'écran d'affichage." Ils seraient en violation de CSS. Mais depuis -webkit-device-pixel-ratio qui fonctionne pour vous, il semble que cela est causé par quelque chose d'autre.

    Vous avez probablement omis cette:

    La fenêtre d'affichage la balise meta est utilisé dans moderne "mobile" des navigateurs. (iOS/Safari, Android, Chrome, Mobile, Firefox, Opera). Il permet aux développeurs de dire "c'est un bien conçu le site, non spécifiques au bureau crud". Sans elle, les navigateurs mobiles supposons que votre site est conçu avec une quelconque min-width, quelque part autour de 960 pixels.

    Quand je dis "pixel", je veux dire "CSS pixel". Nous avons établi que votre CSS pixels sont 3 physique du périphérique "pixels" sur un côté. Et cela signifie que la plus grande dimension sur votre appareil fonctionne à 640 pixels CSS. C'est beaucoup moins 960, donc, le "bureau" des pages web - qui sont, par hypothèse, en l'absence d'une fenêtre d'affichage de la balise meta - commencer un zoom arrière.

    Désolé, je suis un débutant, ce qui est méta viewport? merci
    Cliquez sur les mots dans ma réponse :). J'ai branché mon propre blog, mais il faut accéder à l'canonique explication à quirksmode.
    Oups, il n'a pas. Le quirksmode les articles de ici et ici

    OriginalL'auteur sourcejedi

  3. -4

    `@media screen and (max-device-width: 1920px) {
    /* définir mobile styles spécifiques viennent ici */
    }

    @media only screen and (max-device-width: 640px) {
/* define mobile specific styles come here FOR I PHONE RETENA DISPLAY*/
}`

    OriginalL'auteur dsfg