Question

所以我有2部手机，一部Android Nexus One和一部便宜的简单Android设备，我买了100美元零售。

我正在尝试使用@media和CSS使我的网站移动设备友好（我实际上使用的是stylus和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

起初我认为我的屏幕只是超高分辨率，但这些都不能帮助那些便宜的设备。我的浏览器似乎一切正常，所以我很难过。

谢谢！

Answer 1

尝试将此meta标记添加到您的html的<head>：

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

Answer 2

从这个列表中试试，希望它会有所帮助：

/* 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) {

}

Answer 3

正如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;
  }
}

我发现这有助于保持与规范相关的媒体查询。

CSS媒体查询和我的Nexus One（或其他Android手机）

3 个答案: