2010-10-08 17 views
46

Ich möchte meine Webseite CSS für Webbrowser ändern, die auf Handys laufen, wie das iPhone und Android. Ich habe so etwas wie dies in der CSS-Datei versucht:Unterstützen iPhone/Android-Browser CSS @ media Handheld?

@media handheld { 
    body { 
    color: red; 
    } 
    } 

Aber es scheint keine Wirkung zu haben, zumindest auf dem iPhone. Wie kann ich mein CSS so schreiben, dass es auf dem iPhone anders funktioniert, idealerweise ohne Javascript?

+0

Die meisten Smartphones CSS sie "screen" sind .. .das Sorta macht Sinn angesichts ihrer relativ großen Größe und hohen Auflösung. Einige Teile von HTML/CSS-Standards sind nicht sehr nützlich, und CSS "Handheld" ist einer von ihnen. Verwenden Sie anstelle von CSS-Geräteklassen CSS-Medienabfragen, um tatsächliche Dimensionen zu überprüfen (aber auch das ist wegen des "logischen Ansichtsfensters" etwas schwierig). –

+5

Meiner Meinung nach ist "Handheld" eine perfekt gültige Achse für CSS - manchmal interessiert es Sie nicht, was genau Größe und DPI-Benutzer Bildschirm ist - was Sie * kümmern * aber ist die Art der Interaktion, die sie tun. Ein Handheld bedeutet, dass das Gerät, Bildschirm eingeschlossen, in einer Hand gehalten wird, so dass Sie einige ziemlich genaue Annahmen, zum Beispiel, dass die Bildschirmgröße ist wahrscheinlich nicht größer als 9 "und dass es beabsichtigt, um Armlänge oder verwendet werden soll Diese Dinge sind wichtig, wenn wir für ein Publikum entwerfen: Wir müssen die Pixelzählung stoppen und auf ein "allgemeineres" Plateau kommen. – amn

Antwort

34

können Sie @media queries benutzen.

<link rel="stylesheet" href="path/to/iphone.css" media="only screen and (max-device-width:480px)"/> 

Diese spezielle Version wird das iPhone (und anderes Gerät mit einem Bildschirm von max-device-width von 480px Ziel

Apple für das iPhone, obwohl dies aus Speicher, so dass ich nicht ganz sicher sein kann, seine Genauigkeit, wählte die Verwendung von handheld oder mobile Stylesheets ignorieren, da es, und andere iOS-Geräte in der Lage, css mehr oder weniger vergleichbar mit Desktop-Browsern, über Safari. Für andere Geräte bin ich mir nicht sicher, exa Natürlich, wie treu sie sind, obwohl der Artikel A List Apart (oben verlinkt) einen kurzen Durchlauf von einigen gibt.


in Reaktion Herausgegeben Kommentar von @Colen:

Hmm, es sieht aus wie eine Menge von neuen mobilen Geräte haben eine höhere Auflösung (z Droid X ist 854x480). Gibt es eine Möglichkeit, diese zu erkennen? Ich denke nicht, dass diese mit dieser Abfrage behandelt werden.

ich nicht in der Lage bin mit Sicherheit zu sagen, da habe ich keinen Zugriff auf diese Geräte jedoch eine andere A List Apart Article: Responsive Web Design stellt fest, dass:

Zum Glück der W3C-Medienabfragen als Teil der CSS3-Spezifikation erstellt , Verbesserung des Versprechens von Medientypen. Eine Medienabfrage ermöglicht es uns, nicht nur bestimmte Geräteklassen anzusteuern, sondern die physischen Eigenschaften des Geräts, das unsere Arbeit abbildet, tatsächlich zu überprüfen. Zum Beispiel wurden Medienanfragen nach dem kürzlichen Anstieg von mobilem WebKit zu einer beliebten clientseitigen Technik, um ein maßgeschneidertes Stylesheet für das iPhone, Android-Telefone und dergleichen zu liefern.

So ich nehme an, dass sie, Android-Geräte müssen von @ media-Abfragen ziel der Lage sein, aber, wie gesagt, ich bin nicht in der Lage, mit Sicherheit zu sagen.

geräte Auflösung zu zielen, ist es ein Beispiel:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" /> 

Weiterführende Literatur: W3 Candidate Recommendation for media queries.

+0

Es sollte "max-device-width" sein (du hast einen Platz drin) , aber sonst war das super. Danke! – Colen

+0

Danke @Colen, der Tippfehler ist jetzt behoben. =) –

+1

Hmm, es sieht aus wie viele neue mobile Geräte haben höhere Auflösungen (zB Droid X ist 854x480). Gibt es eine Möglichkeit zu erkennen diese? Ich glaube nicht, dass diese mit dieser Abfrage behandelt werden. – Colen

29

Von this site gibt es ein paar andere Medien-Abfragen, die in Ausrichtung auf iPhones/Android Phones nützlich sind:

// target mobile devices 
@media only screen and (max-device-width: 480px) { 
    body { max-width: 100%; } 
} 

// recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display 
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    // CSS goes here 
} 

// should technically achieve a similar result to the above query, 
// targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi) 
@media only screen and (min-resolution: 300dpi) { 
    // CSS goes here 
} 

ich in der Lage war, um erfolgreich die max-device-width Medien Abfrage zu verwenden, um Android-Handy erfolgreich Ziel, obwohl ich die Breite bis zu 800px eher als die aufgelisteten 480 anpassen musste.Für iPhone 4 hat das -webkit-min-device-pixel-ratio auf das iPhone4 abgezielt (max-device-width: 480px nicht, ich gehe davon aus, dass es das iPhone3 anvisieren wird, hatte aber kein handliches zu testen.)

Ich kann sehen, das wird ziemlich chaotisch, aber wenn Sie eine Vielzahl von Geräten unterstützen müssen und benutzerdefinierte CSS für jeden von ihnen, solange sie Medienabfragen unterstützen, scheint es, als es möglich ist, was Sie tun müssen zwicke jede Plattform. Und ja, ich würde zuerst Standards kodieren, so dass so viel CSS wiederverwertbar ist, aber viele Male reden wir darüber, alternative Layouts zu präsentieren, die heutzutage für die verwendeten Geräte geeignet sind.

18

@media handheld bezieht sich nur auf diese alten winzigen Proto-HTML-Handys aus vergangenen Jahren, die nicht einmal wirklich Webseiten anzeigen konnten. Die ePUB-, MOBI-, Tablet- und Community-Anbieter haben alle nachdrücklich gesagt: "H * ck nein, wir sind nicht@media handheld Geräte!" weil sie richtig besorgt waren, dass dies sie für immer in einem Niemandsland landen würde, das "echten" Webseiten untergeordnet ist.

Mit den heutigen kleinen Geräten mit sehr hochauflösenden Displays haben wir immer noch keine gute Möglichkeit, HTML zu sagen, wie man Dinge "richtig" auf großen Displays mit relativ geringer Auflösung gegenüber kleinen Displays mit sehr hoher Auflösung anzeigt. Und als zertifizierter alter Furz möchten meine Augen dich daran erinnern, dass die Antwort nicht nur darin besteht, alles inklusive Schrift 2X kleiner zu machen.

+0

Lohnt es sich, Medienabfragen zu DPI/DPCM-Werten zu betrachten, Bildschirmgrößen in cm/Zoll und Seitenverhältnisse stattdessen? –

4

Nein, weder iPhone- noch Android-Browser unterstützen CSS @media handheld.

0

Betrachten Sie die Medienabfrage 'Hover'.

Setzen Sie diese in Ihrer SCSS Datei:

// At this point the CSS would target screens above 990px - but only 
// if they support hover (i.e. laptops, PC's etc). 
$point-at-which-use-large-screens: (min-width 990px) (hover hover); 

.some-class-you-want-to-target { 

    // Some CSS to only apply to larger screens with mouse available. 
    @include breakpoint($point-at-which-use-large-screens) { 
    color: red; 
    } 
} 

Nach Grunzen läuft usw. auf dem SCSS diese CSS wie die Suche produzieren: tell

@media (min-width: 991px) and (hover: hover) { 
    color:red; 
}