CSS media queries pour Galaxy S3

Ce que quelqu'un sait comment cibler le Samsung Galaxy S3 avec les media queries?

J'utilise actuellement:

iPad

<link rel="stylesheet" media="all and (device-width: 768px)"                                                href="css/device-768.css"/>

Autres tablettes

<link rel="stylesheet" media="all and (max-device-width: 767px) and (min-device-width: 641px)" href="css/device-max767.css"/>

Téléphones (S3 na pas utiliser cette - je ne sais pas pourquoi)

<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1)"    href="css/phones.css"/>

J'ai aussi testé

<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"    href="css/phones.css"/>

mais cela n'a pas fonctionné...

  • Ne sont pas ces "tests" résolution de l'écran plutôt que d'appareils?
  • Qu'est-ce que les dimensions en pixels de la S3? Une fois que vous savez que vous pouvez cibler avec une simple largeur / hauteur de la requête de média. La grande question est pourquoi n'êtes-vous pas à l'aide de l'appareil agnostique media query points d'arrêt.
  • Je ne pense pas que les media queries sont adaptés pour les périphériques cible. C'est la mauvaise question à poser.
  • je ne veux pas cibler des appareils, mais je veux que tous les téléphones de la même css - mais, malheureusement, le s3 n'est pas une cible de mon querry. donc, im surching un querry qui cible le s3...
  • Eh bien, c'est tout simplement pas souhaitable. Pas tous les téléphones sont de la même taille. Beaucoup mieux à la cible de la taille de l'écran pas "ce que l'appareil est". Vous pensez à tort. Par exemple, qu'est Ce qu'un Galaxy Note?
  • hm, je ne veux pas l'objectif 20 d'écran différent de taille... actuellement, j'ai un flottant de mise en page avec des elemnts taille comme ceci: 1-1-1, 2-1, 3, 1-2... je veux les 3 points de vue différents - pour pc/ordinateurs portables: la taille d'origine et les marges; pour les dpa: pas de marges entre les éléments; pour les téléphones: alle des éléments de taille à 100%... donc, je pense que j'essaie de cibler le s3 n'est pas d'aussi mauvais...
  • Je suis avec les OP sur ce point - La question n'a pas été répondu, et est toujours valide. J'ai, par exemple, les construis un très grand site responsive pour le moment, et il y a certaines fonctionnalités qui sont différentes pour desktop et mobile. Le Galaxy S3 est un problème pour nous, car il a une haute densité d'affichage, mais encore les rapports de ses réelles dimensions en pixels (contrairement à Apple la plus logique qui consiste à diviser le nombre de pixels réels par le ratio de pixel et de faire rapport à la taille).

InformationsquelleAutor jacksbox | 2012-06-14
  1. 49

    J'ai mis en place une page qui vous montre comment l'appareil va réagir aux demandes des médias en donnant les valeurs des caractéristiques des médias. Il suffit de visiter la page avec le périphérique que vous souhaitez tester:

    http://pieroxy.net/blog/pages/css-media-queries/test-features.html

    À partir de là, vous pouvez décider des requêtes de média que vous souhaitez utiliser en fonction de ce que les différents dispositifs de rapport. Rappelez-vous, il est généralement une mauvaise idée de cibler des périphériques spécifiques. Vous devriez plutôt cible de taille de l'écran et la densité pour faire de votre site web de s'adapter à la surface à la main.

    • Beau Travail Pieroxy. Cela m'a beaucoup aidé.
    • C'est très utile - voici un lien abrégé pour le confort est.gd/Rc2wwb
    • Très agréable. Une fonctionnalité intéressante (pas nécessairement en raison de vos tests), c'est que le paysage et le portrait des numéros de ne pas juste changer, mais le changement lorsqu'il est testé sur mon Samsung Galaxy S4. Portrait width:360px, hauteur:567px. Paysage width:640px, hauteur:287px. Je ne sais pas beaucoup sur ce genre de choses, mais il me semble étrange.
    • Dans le cas où c'est toujours bizarre pour vous, c'est parce que vous avez d'autres éléments qui utilisent votre certains de l'espace disponible. Comme la barre d'action, par exemple, un portrait ou paysage, il y en aura toujours de la place sur votre hauteur, c'est pourquoi vous ne serez pas en mesure de simplement échanger les valeurs.
    • très cool!
    • Excellent travail pieroxy, bookmarking
    • Beau travail, pieroxy, très utile.

    InformationsquelleAutor pieroxy
  2. 13

    À cette époque, les appareils mobiles ont tellement améliorée que leurs résolutions d'écran sont similaires et parfois même mieux que les ordinateurs de bureau les résolutions d'écrans.

    Par exemple le Galaxy S4 de Samsung a 1080X1920 pixels - écran Full HD!

    Mais en responsive design, nous vérifions la résolution et la nécessité d'ajustement en fonction de la résolution et, si vous essayez d'ajouter une media query, disons min-largeur de 1000px et vérifier sur le Samsung Galaxy S4, vous verrez que rien ne s'est passé.

    La raison pour cela est que le mobile haute densité écran ont deux aspects de pixels.

    Résolution réelle
    La première résolution est de l'usine, résolution réelle, c'est surtout pour les vidéos et les images. sur le Samsung galaxy S4, la résolution réelle est 1080X1920.

    CSS résolution
    La deuxième résolution est pour le navigateur. et pour nous, les développeurs, cela signifie que nous devons agir de différentes et non pas selon la véritable résolution de l'écran. Samsung Galaxy S4, CSS résolution est 360x640 italiano.

    Samsung Galaxy S4 résolution:
    Résolution réelle: 1080X1920
    CSS résolution: 360x640 italiano

    Comment acquérir CSS résolution? Dans Wikipedia vous disposez de tous les appareils mobiles de table de résolution (tablette et les appareils mobiles). http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

    /*(ldpi) Android*/
@media only screen and (-webkit-device-pixel-ratio:.75){

  /*CSS  */
}

/*(mdpi) Android*/
@media only screen and (min-device-width : 480px) and (max-device-width : 800px) {

  /*CSS  */
}

/*(hdpi) Android*/
@media only screen and (-webkit-device-pixel-ratio:1.5){

  /*CSS  */

}
    • Merci beaucoup pour ce récapitulatif. Je voterais votre réponse à deux reprises.
    InformationsquelleAutor Xman Classical
  3. 9

    J'ai utilisé cette cible seulement le mode portrait sur le s3:

    @media only screen and (min-device-width : 719px) and (max-device-width : 721px) and (-webkit-min-device-pixel-ratio : 2) and (orientation : portrait) { 

}
    • Très spécifique pour le S3, mais il n'répondre à la question.
    InformationsquelleAutor Rowan
  4. 6

    Comme mentionné avant. Utilisez cette détecteur de Requête de Média sur votre appareil et aussi envisager d'utiliser une meilleure conception de fluide - hacks CSS ne sont pas bonnes - vous devriez pas vraiment besoin d'eux dans 90% des cas si vous avez une bonne conception de fluide.

    Samsung Galaxy S3

    @media only screen and (max-device-width: 720px) and (orientation:portrait) {
  .your-css{}
}

@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
  .your-css{}
}
    • Outre de répondre à la question, cela créerait des problèmes de différenciation de style entre le téléphone et la tablette en général?
    • Oui, il est un peu daté maintenant mon approche. Trop grand nombre de périphériques et les tablettes. Meilleure approche de l'OMI est responsive design dédié responsive site mobile dédié et séparé store pour tablette et sur le web dépend du scénario si.
    • N'est-ce pas plutôt de manquer le point de l'utilisation de réactif à tous? Doit être "un seul site web pour tous les appareils", vraiment.
    • Je l'ai dit le scénario suivant. Nous avons un semi réactive le site du bureau et de l'optimisation pour les tablettes. Nous avons également une dédiée entièrement responsive web mobile app.
    InformationsquelleAutor TheBlackBenzKid
  5. 5

    Samsung Galaxy S I & II: 320 x 533, en mode portrait (CSS densité de pixels est de 1,5)

    Samsung Galaxy S III: 360 x 640, en mode portrait

    • bonne réponse, car il donne les détails pour résoudre ce gars problème, au lieu de le convaincre que sa technique n'est pas correct.
    InformationsquelleAutor Jen-Lars
  6. 1

    Sur mon Samsung S3 avec Android 4.1.2, alors j'ai essayé tous les médias fonctionnalités de requête (max-hauteur, la largeur, l'appareil de la hauteur et de la largeur et de la même couleur:8) seulement cela a fonctionné pour moi en plus de la deuxième réponse ci-dessus dans cette page:

    Samsung S3 navigateur par défaut

    /* Samsung S3 default browser portrait*/
@media only screen and (device-width: 720px) and (device-height: 1280px) and (orientation: portrait) {
body { background:yellow;} 
}

/* Samsung S3 default browser landscape */
@media only screen and (device-width: 1280px) and (device-height: 720px) and (orientation: landscape)  {
body { background:#000;} 
}

    Voici une capture d'écran pour la pieroxy requête de support d'outil de diagnostic de test. Veuillez noter que les deux fonctionnent sans orientation, mais ne change pas la propriété sans charge/actualiser.

    Espère que cette aide avec aucun conflit avec les autres requêtes que vous pourriez utiliser

    InformationsquelleAutor hsobhy
  7. 0

    Je pense que ce serait en toute sécurité s'appliquent à la plupart des téléphones d'aujourd'hui (Cth, iphone, Samsung), tout en évitant la commune de la tablette largeurs (iPad iPad 3/4 iOS 6 a 672px sur le portrait).

    <link rel='stylesheet' href='/Styles/device_phone.css' media='screen and (max-width: 640px)'/>

    Ce téléphone serait les drôles de poissons:

    Samsung Nexus S Android 2.3.6 Stock Navigateur qui a
    width: 480px, hauteur: 800px (max-width 800)

    Il n'est généralement pas recommandé de cibler les dispositifs spécifiques, mais si vous avez vraiment envie de cibler les drôles de poissons, vous pouvez, car il a d'autres attributs uniques. Personnellement, je préfère utiliser max-largeur que je peux tester directement sur mon bureau et écran large, et je ne suis pas embêté pour les utilisateurs de voir l'affichage mobile si ils ont vraiment fait de redimensionner leur navigateur à moins de 640 de large.

    De référence:
    http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

    InformationsquelleAutor bcm
  8. 0

    C'est testé et a travaillé. 

    @media only screen and
(device-width: 720px) and
(device-height: 1280px)  and
(-webkit-min-device-pixel-ratio: 2)
    InformationsquelleAutor user2060451
  9. -2

    Oublier tout ça "max-device-width" "min-height", etc, le charlatanisme!Le problème est que vous les gars ne sont pas de la conception, les dimensions de l'appareil. Aussi, le Galaxy S3 selon Samsung a une densité de pixel de 2, ce qui signifie que l'écran des cartes de 1 pixel appareil à 2 CSS pixels. Si cela est vrai, alors la résolution 720x1280 n'est qu'une logique de résolution et non de la vraie physique de la résolution de l'appareil! C'est également le cas avec l'iphone 4 d'Apple qui a une résolution de 640x960px, qui est en fait la logique de la résolution et de ne PAS la résolution réelle de l'appareil réel. La physique de la résolution de l'iphone est la moitié de ce nombre après la prise en compte de la densité de pixels, le sens de ses dimensions physiques sont en fait 320x480, ce qui est vrai depuis que j'ai utiliser ce code tout le temps!

    Par conséquent, si le S3 aussi a une densité de pixel de 2, puis de son réel de la résolution native est en fait 360x640px, PAS 720x960 que Samsung a déclaré. Encore une fois, l'appareil les cartes sur 2 CSS pixels à 1 pixel appareil! Aussi, pourquoi sur la terre sont les gens utilisent des médias variables dans les requêtes, le charlatanisme je vous dis!

    @media screen and (device-width: 360px) and (device-height: 640px) and (orientation: portrait) {

    Styles rendez-vous ici
    }

    @media screen and (device-width: 640px) and (device-height: 360px) and (orientation: landscape) {

    Styles ici
    }
    OU:
    Vous pouvez juste l'état de la logique de la résolution qui a été fourni par Samsung, DuH!, La science de fusée droite?

    @media screen and (width: 720px) and (height: 1280px) and (orientation: portrait) {

    Styles
    }

    @media screen and (width: 1280px) and (height: 720px) and (orientation: landscape) {

    Styles
    }
    Très simple! C'est tout là est à lui. Et les gens se demandent pourquoi ils ne peuvent pas obtenir les requêtes des médias pour le travail, mais ils utilisent l'ensemble de ces valeurs de la variable. Essayez en fait de ciblage de la résolution de l'appareil. Il n'y a pas de raison sur la terre à utiliser des valeurs de variables telles que "max-width", etc.

    • -1 je pense qu'il y a de nombreuses raisons d'utiliser max-width (et d'autres) au lieu de cibler des périphériques spécifiques du cahier des charges. La raison la plus importante est que je ne veux pas à la charge sur chaque appareil sous le soleil; le ciblage des groupes de périphériques à l'aide de max-width me permet seulement de maintenir les 3 ensembles différents de styles: desktop, tablette et téléphone. Une autre raison importante est parce que je ne veux pas avoir à mettre à jour mon CSS/site web chaque fois qu'un nouveau dispositif est publié, je peux être sûr que la plupart des nouveaux appareils d'automne dans les limites de max-width j'ai déjà établi.
    • Le S3 renvoie également 360px pour width, pas seulement device-width. Je crois que la différence entre les deux est vers le bas pour les barres de défilement et l'adresse de la barre (qui sont inclus dans device-width mais pas width), pas le réel versus logique des résolutions.
    InformationsquelleAutor djdaniel150