2

だから私は2台の電話をAndroidNexusOneと、100ドルの小売価格で購入した安価でシンプルなAndroidデバイスを持っています。

@mediaとCSSを使用してWebサイトのモバイルデバイスを使いやすくしようとしています（実際にはスタイラスと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

最初は私の画面は超高解像度だと思っていましたが、これらのどれも安価なデバイスには役立ちません。私のブラウザではすべてが正常に機能しているように見えるので、困惑しています。

ありがとう！

4

3 に答える 3

5

metaこのタグを<head>HTMLのに追加してみてください。

<meta name="viewport" content="width=device-width,initial-scale=1">
于 2012-05-13T22:25:23.857 に答える
0

このリストから試してみてください、それが役立つことを願っています：

/* 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-13T21:28:34.373 に答える
0

tw16が言うwidth=device-widthように、より大きな解像度を持っているふりをしないようにブラウザに指示する必要があります。別の注意点として、最近のバージョンのStylusでは、これも合法です。

.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-15T09:05:26.980 に答える