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

【问题标题】：CSS Media Queries and My Nexus One (Or other Android phones)CSS 媒体查询和我的 Nexus One（或其他 Android 手机）
【发布时间】：2012-05-21 11:14:47
【问题描述】：

所以我有 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

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

谢谢！

【问题讨论】：

标签： android css node.js media-queries stylus

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

所以为了澄清一下，如果有其他人使用玉，这将是 meta(name="viewport", content="width=device-width,initial-scale=1")。此时 max-device-width 480px 工作谢谢！

【解决方案3】：

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

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

}

【讨论】：