Ich möchte Bilder mit höherer Auflösung für iPhone 4-Benutzer laden, aber die einzige Möglichkeit, Benutzer zu erkennen, ist von einem Benutzer-Agent. Aber ich habe den Eindruck, dass der User-Agent von MobileSafari auf jedem iOS4-Telefon auf der ganzen Linie gleich ist.Gibt es eine Möglichkeit, einen iPhone 3G/S-Besucher mit einem iPhone 4-Besucher zu vergleichen?
Was könnte ich tun, um ein iPhone 4 zu erkennen?
Sie können CSS3-Medienabfragen verwenden, um das Geräte-Pixel-Verhältnis des iPhone 4 zu ermitteln (wie viele CSS-Pixel einem physischen Anzeigepixel entsprechen). Dann können Sie CSS verwenden, um Bilder mit höherer Auflösung anstelle der normalen Bilder zu laden.
Im <head> Tag auf Ihrer Webseite, fügen Sie diese ein externes Stylesheet zu verweisen, die nur für iPhone 4 Nutzer geladen werden:
<link rel="stylesheet" type="text/css" href="high_res.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
Das media Attribut nur mit einer Verwendung dieses Stylesheet für Geräte spezifiziert minimales Geräte-Pixel-Verhältnis von 2 (dh das iPhone 4). Dann können Sie CSS-Regeln in high_res.css zu ersetzen Low-Res-Bilder mit hohen Auflösung Versionen hinzu:
#highres-if-possible {
background-image: url(high_res_pic.png);
}
Beachten Sie, dass das Bild in HTML angeben müssen durch die CSS-Eigenschaft background-image anstelle der Verwendung src Attribut.
Beispiel: für ein 60x50 Bild ersetzen:
<img id="highres-if-possible" src="low_res_pic.png">
mit
<img id="highres-if-possible" style="width: 60px; height: 50px; background-image: url(low_res_pic.png);">
keine Garantie dafür, dass die Angabe Bilder wie diese wird in allen Browsern (Internet Explorer) arbeiten, aber es sollte funktionieren in standardkonformen Browsern (und auf dem iPhone).
Für weitere Informationen über CSS3 Media Queries und mit ihnen das iPhone 4 zu erkennen, finden Sie: http://blog.iwalt.com/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries.html
UPDATE: Ich kam in this post und this post die eine bessere Art und Weise die Bilder Angabe zu behandeln haben könnten Verwenden von CSS (mit <img style="background-image:url(http://.. .)"> anstelle von <img src="http://...">) als das, was ich oben habe.
mit der HTTP_USER_AGENT Zeichenfolge könnten Sie wahrscheinlich herausfinden, welche es ist. Ich habe es nie versucht, aber wenn Sie anfangen sollten. Auch sehe ich ein paar PHP-Bibliothek, die es für Sie tun wird. hoffe das hilft. Prost.
möglich duplizieren: http://StackOverflow.com/Questions/3262432/ wo das OP besagt, dass es möglich ist, Bildschirmgröße von js zu erkennen. – mvds
http://stackoverflow.com/questions/3354246/javascript-iphone-selection/3354478#3354478 Vielleicht der Hilfe. –