適切なメディアクエリの構文CSS Iphone

Question

オンラインのレスポンシブデザインテスターとCSSの宣言（たとえば、@media only screen and (max-width: 480px) {）を使用してデバイス用のサイトを適切にフォーマットできましたが、実際のiPhoneでサイトをテストするときにはこれらのCSS宣言は存在しませんブラウザによって計算されます。

また、max-device-widthを試してみましたが、初期スケールを<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>.に設定しました。初期スケール設定なしで前の宣言を試しました。

私も試してみました：@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {

をも：このonly screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) {

どれもまだiphoneをターゲットに働いていません。 iphone 3/4を対象とするには、何が欠けていますか？

Answer 1

：例えば

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

を。貢献に感謝します。

Answer 2

私はこのタスクを行うためにメディアクエリを全く信用しません。

彼らは私に何回も失敗しました。あなたは運がない場合は、デバイスを検出するJSまたはサーバー側のソリューションに行く。これは、JSのためにおそらく行く：私は成功したiphoneとCSS宣言を使用してデバイスをターゲットすることができました

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'); 
}