Requêtes de média CSS pour Galaxy S3
Quelqu'un sait comment cibler le Samsung Galaxy S3 avec des requêtes de médias?
Actuellement j'utilise:
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 n'a pas utilisé cela - 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 ça n'a pas marché ...
J'ai créé une page qui vous indique comment un périphérique réagit aux requêtes multimédia en indiquant les valeurs des fonctionnalités multimé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 choisir la requête multimédia que vous souhaitez utiliser en fonction des rapports des différents périphériques. N'oubliez pas que c'est généralement une mauvaise idée de cibler des périphériques spécifiques. Vous devriez plutôt cibler les tailles et la densité d'affichage pour que votre site Web s'adapte à la surface.
À ce jour, les appareils mobiles se sont tellement améliorés que leurs résolutions d'écran sont similaires et parfois même meilleures que les résolutions d'écran de bureau.
Par exemple, le Galaxy S4 de Samsung possède un écran 1080X1920 pixels - Full HD!
Mais dans le responsive design, nous vérifions la résolution et devons nous adapter en fonction de la résolution. Si vous essayez d’ajouter une requête multimédia, supposons une largeur minimale de 1000 pixels et vérifiez-la sur le Samsung Galaxy S4.
La raison en est que les écrans mobiles haute densité ont deux aspects de pixels.
Résolution réelle La première résolution est la résolution réelle d'usine, principalement pour les vidéos et les images. sur Samsung Galaxy S4 la résolution réelle est 1080X1920.
Résolution CSS La deuxième résolution est destinée au navigateur. et pour nous, développeurs, cela signifie que nous devons agir différemment et non en fonction de la résolution réelle de l'écran. dans Samsung Galaxy S4, la résolution CSS est de 360X640.
Résolution Samsung Galaxy S4: Résolution réelle: 1080X1920 Résolution CSS: 360X640
Comment acquérir une résolution CSS? Dans Wikipedia, vous avez toutes les tables de résolution des appareils mobiles (tablettes et 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 */
}
J'ai utilisé cela pour cibler uniquement la vue 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) {
}
Comme mentionné précédemment. Utilisez ce détecteur Media Query sur votre combiné et envisagez également d’utiliser une meilleure conception des fluides. Les piratages CSS ne sont pas bons. Vous ne devriez pas en avoir vraiment besoin dans 90% des scénarios si vous avez une bonne conception des fluides.
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{}
}
Samsung Galaxy S I et II: 320 x 533, en mode portrait (la densité de pixels CSS est de 1,5)
Samsung Galaxy S III: 360 x 640 , en mode portrait
Sur mon Samsung S3 avec Android 4.1.2, alors que j'essayais toutes les fonctionnalités de requête multimédia (hauteur maximale, largeur, hauteur et largeur du périphérique et même couleur: 8), cela ne fonctionnait que 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 le test de l'outil de diagnostic d'interrogation de média pieroxy . Veuillez noter que les deux fonctionnent sans orientation mais ne changent pas la propriété sans chargement/rafraîchissement.
J'espère que cela vous aidera avec aucun conflit avec d'autres questions que vous pourriez utiliser
Ceci est testé et travaillé.
@media only screen and
(device-width: 720px) and
(device-height: 1280px) and
(-webkit-min-device-pixel-ratio: 2)
Je pense que cela s'appliquerait en toute sécurité à la plupart des téléphones d'aujourd'hui (HTC, iPhone, Samsung), tout en évitant les largeurs courantes de tablette (iPad iPad 3/4 iOS 6 a 672px en portrait).
<link rel='stylesheet' href='/Styles/device_phone.css' media='screen and (max-width: 640px)'/>
Ce téléphone serait le poisson étrange:
Samsung Nexus S Android 2.3.6 Stock Browser qui a une largeur de .__: 480px, hauteur: 800px (largeur maximale 800)
Il n'est généralement pas recommandé de cibler des périphériques spécifiques, mais si vous vouliez vraiment cibler les poissons étranges, vous pouvez le faire, car ils possèdent d'autres attributs uniques. Personnellement, je préfère utiliser max-width car je peux le tester directement sur mon ordinateur de bureau et sur un grand écran. Je ne suis pas inquiet pour les utilisateurs qui voient la vue mobile s'ils redimensionnent réellement leur navigateur à moins de 640 pixels.
Référence: http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html