2

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

我正在尝试使用@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

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

谢谢！

4

3 回答 3

5

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

<meta name="viewport" content="width=device-width,initial-scale=1">
于 2012-05-13T22:25:23.857 回答
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 回答
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 回答