CSSメディアクエリとMy Nexus One（またはその他のAndroid搭載端末）

Android Nexus Oneと格安の簡単なAndroid搭載端末を2台ご用意しています。CSSメディアクエリとMy Nexus One（またはその他のAndroid搭載端末）

@mediaとCSSを使用して自分のウェブサイトのモバイルデバイスを使いやすくしようとしています（実際にスタイラスとNode.JSを使用しているので、コードが面白く見えるかもしれません）。

だから私は、まず自分のスタイルに次の

//trial 1 
@media (max-width:480px) 
    display none 
//Trial 2 
@media (resolution: 163dpi) 
    display none 
//Trial 3 
@media (-webkit-device-pixel-ratio:0.75) 
    display none 
//Trial 4 
@media screen and (max-width:480px) 
    display none

を追加しました私は自分の画面だけで超高解像度だと思ったが、これらのどれもがいずれかの安価なデバイスを助けていません。すべて私のブラウザで正常に動作するように見えるので、私は困惑しています。

ありがとうございます！このリストから

出典

2012-05-13 Jackie

あなたのhtmlの<head>にこのmetaタグを追加してみてください：tw16として

<meta name="viewport" content="width=device-width,initial-scale=1">

出典

2012-05-13 22:25:23 tw16

これは、翡翠を使用している他の人がいるので、これはmeta（name = "viewport"、content = "width = device -width、initial-scale = 1 "）。最大デバイス幅480ピクセルがうまくいきましょう！ – Jackie

しようとすると、それに役立つことを願っています：

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 

} 
/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 

} 
/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 

} 
/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

} 
/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 

} 
/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 

} 
/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 

} 
/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 

} 
/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 

}

出典

2012-05-13 21:28:34

いいえサイコロ、私はこれらのすべてを試して、彼らはうまくいきません.... – Jackie

あなたが教えてwidth=device-widthを必要とする、と言いますより大きな解像度を持つふりをしないブラウザ別のノートでは、スタイラスの最近のバージョンでこれも合法である：

にコンパイル

.foo 
    display block 
    & 
    @media (max-width:480px) 
     display none 
    @media (resolution: 163dpi) 
     display none 
    @media (-webkit-device-pixel-ratio:0.75) 
     display none 
    @media screen and (max-width:480px) 
     display none

：

.foo { 
    display: block; 
} 
@media (max-width:480px) { 
    .foo { 
    display: none; 
    } 
} 
@media (resolution: 163dpi) { 
    .foo { 
    display: none; 
    } 
} 
@media (-webkit-device-pixel-ratio:0.75) { 
    .foo { 
    display: none; 
    } 
} 
@media screen and (max-width:480px) { 
    .foo { 
    display: none; 
    } 
}

私はこれが仕様書に関連するメディアクエリを維持するのに役立ちます見つけます。

出典

2012-05-15 09:05:26

CSSメディアクエリとMy Nexus One（またはその他のAndroid搭載端末）

答えて

関連する問題