Korrekte Medien Abfrage Syntax CSS Iphone

Question

Ich war in der Lage, eine Website ordnungsgemäß für Geräte mit einem Online-resonsive Design-Tester und die css-Erklärung, zum Beispiel, @media only screen and (max-width: 480px) {, aber beim Testen der Website auf einem tatsächlichen iphone diese css-Deklarationen sind nicht zu formatieren berechnet vom Browser.

Ich habe auch versucht max-device-width und habe die Anfangsskala auf <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>. eingestellt Ich habe auch die vorherige Erklärung ohne die anfängliche Skalierung versucht.

Ich habe auch versucht: @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {

auch: only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) {

Nichts davon hat funktioniert noch das iPhone zielen. Was vermisse ich, um erfolgreich ein iphone 3/4 anzusprechen?

Answer 1

Ich habe erfolgreich in der Lage gewesen, iphone und Geräte zielen auf die CSS-Deklaration mit:

@media all and (max-width: 480px) { 
    /* put iphone css formatting here */ 
} 

zum Beispiel. Danke für die Beiträge.

Answer 2

Ugh ... Ich vertraue Medienabfragen überhaupt nicht, um diese Aufgabe zu erledigen.

Sie haben mich viel zu oft versagt. Wenn Sie kein Glück haben, entscheiden Sie sich für eine JS- oder serverseitige Lösung zum Erkennen des Geräts. geht vielleicht für diese js:

var pixelRat = window.devicePixelRatio; 
var screenWidth = screen.width; 

//iPhone Retina Display 
if (pixelRat >= 2) 
{ 
    $('meta[name=viewport]').attr('content','initial-scale=.5, maximum-scale=.5'); 
    $('link[name=mainstyle').attr('href', 'css/iphoneHD.css'); 
} 
//iPhone 3gs, 3g, Edge 
else if (pixelRat < 2 && screenWidth == 320) 
{ 
    $('meta[name=viewport]').attr('content','width=device-width, minimum-scale=1.0, maximum-scale=1.0'); 
    $('link[name=mainstyle]').attr('href', 'css/iphone.css'); 
} 
//iPad 1 and 2 
else if (pixelRat < 2 && screenWidth == 768) 
{ 
    $('meta[name=viewport]').attr('content','width=device-width, minimum-scale=1.0, maximum-scale=1.0'); 
    $('link[name=mainstyle]').attr('href', 'css/mobile.css'); 
    $('link[name=loginpadstyle]').attr('href', 'css/loginpad.css'); 
} 
//Mac OS X, Windows, Etc. 
else 
{ 
    $('meta[name=viewport]').attr('content','width=device-width, minimum-scale=1.0, maximum-scale=1.0'); 
    $('link[name=mainstyle').attr('href', 'css/style.css'); 
}