it-swarm.com.de

CSS-Medienabfragen für Galaxy S3

Weiß jemand, wie man mit Medienanfragen das Samsung Galaxy S3 anspricht?

Zur Zeit verwende ich:

iPad

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

Andere Tablet-Geräte

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

Telefone (S3 hat dies nicht verwendet - weiß nicht warum)

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

Ich habe auch getestet

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

aber es hat nicht funktioniert ...

25
jacksbox

Ich habe eine Seite eingerichtet, die Ihnen zeigt, wie ein Gerät auf Medienabfragen reagiert, indem es die Werte der Medienfunktionen angibt. Besuchen Sie einfach die Seite mit dem Gerät, das Sie testen möchten:

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

Von dort aus können Sie entscheiden, welche Medienabfrage Sie verwenden möchten, je nachdem, was die verschiedenen Geräte melden. Denken Sie daran, dass es im Allgemeinen eine schlechte Idee ist, auf bestimmte Geräte zu zielen. Sie sollten sich eher auf Displaygrößen und -dichte einstellen, damit sich Ihre Website an die jeweilige Oberfläche anpasst.

49
pieroxy

Derzeit haben sich mobile Geräte so sehr verbessert, dass ihre Bildschirmauflösungen ähnlich sind und manchmal sogar besser sind als Desktop-Bildschirmauflösungen.

Zum Beispiel hat das Galaxy S4 von Samsung 1080X1920 Pixel - Full HD-Bildschirm!

Beim Responsive Design überprüfen wir jedoch die Auflösung und müssen entsprechend der Auflösung angepasst werden. Wenn Sie versuchen, eine Medienabfrage hinzuzufügen, sagen wir eine Min-Breite von 1000px, und überprüfen Sie diese auf dem Samsung Galaxy S4.

Der Grund dafür ist, dass mobile Bildschirme mit hoher Dichte zwei Aspekte von Pixeln haben.

Reale Auflösung .__ Die erste Auflösung ist die werkseitige Auflösung, hauptsächlich für Videos und Bilder. Auf der Samsung Galaxy S4 beträgt die tatsächliche Auflösung 1080X1920.

CSS-Auflösung Die zweite Auflösung ist für den Browser. Für uns Entwickler bedeutet das, dass wir uns anders verhalten müssen und nicht der Bildschirmauflösung entsprechen. In Samsung Galaxy S4 beträgt die CSS-Auflösung 360X640.

Samsung Galaxy S4 Auflösung: Reale Auflösung: 1080X1920 CSS-Auflösung: 360X640

Wie erhalte ich eine CSS-Auflösung? In Wikipedia haben Sie alle mobilen Geräte Auflösungstabelle (Tablet und mobile Geräte). 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  */

}
13
Xman Classical

Ich habe dies verwendet, um nur die Porträtansicht auf der S3 zu zielen:

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

}
9
Rowan

Wie schon erwähnt. Verwenden Sie diesen Media Query-Detektor an Ihrem Mobilteil und ziehen Sie auch ein besseres Fluid-Design in Betracht - CSS-Hacks sind nicht gut - Sie sollten sie in 90% der Szenarien nicht wirklich brauchen, wenn Sie ein gutes Fluid-Design haben.

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{}
}
6
TheBlackBenzKid

Samsung Galaxy S I & II: 320 x 533 im Hochformat (CSS-Pixeldichte beträgt 1,5)

Samsung Galaxy S III: 360 x 640 , im Hochformat

5
Jen-Lars

Auf meinem Samsung S3 mit Android 4.1.2 funktionierte neben die zweite Antwort oben auf dieser Seite:

Samsung S3 Standardbrowser

/* 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;} 
}

Hier ist ein Screenshot für den Pieroxy Media Query Diagnostic Tool Test. Bitte beachten Sie , dass beide ohne Orientierung funktionieren, ohne das Laden/Auffrischen jedoch nicht die Richtigkeit ändern.

Ich hoffe, dies hilft bei keinem Konflikt mit anderen Abfragen, die Sie möglicherweise verwenden

1
hsobhy

Dies wird getestet und funktioniert. 

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

Ich denke, dies würde sicher für die meisten Handys von heute (HTCs, iPhones, Samsung) gelten, während die üblichen Tablettbreiten vermieden werden (iPad iPad 3/4 iOS 6 hat 672px im Hochformat).

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

Dieses Telefon wäre der seltsame Fisch:

Samsung Nexus S Android 2.3.6. Aktienbrowser mit Breite: 480px, Höhe: 800px (max. Breite 800)

Es wird im Allgemeinen nicht empfohlen, auf bestimmte Geräte zu zielen, aber wenn Sie wirklich auf den ungeraden Fisch zielen möchten, können Sie dies tun, da er andere einzigartige Attribute hat. Ich persönlich ziehe es vor, max-width zu verwenden, da ich direkt auf meinem Desktop und Breitbildschirm testen kann. Ich bin nicht besorgt darüber, dass Benutzer die mobile Ansicht sehen, wenn sie wirklich die Größe ihres Browsers auf weniger als 640 mm geändert haben.

Referenz: http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

0
bcm