CSS Media Queries和My Nexus One（或其他Android手机）
[英]CSS Media Queries and My Nexus One (Or other Android phones)
问题描述
So I have 2 phones an Android Nexus One and a cheap simple Android device I bought for like $100 retail. 
因此，我有2部手机，分别是Android Nexus One和我以100美元的零售价购买的便宜的简单Android设备。
I am trying to make my website mobile device friendly using @media and CSS (I am actually using stylus and Node.JS so the code may look a bit funny). 我正在尝试使用@media和CSS使我的网站移动设备友好（我实际上是在使用手写笔和Node.JS，因此代码可能看起来有些可笑）。
So I added the following to my style 所以我在我的风格中添加了以下内容
//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
At first I thought my screen was just super high res, but none of these help the less expensive device either. 起初我以为我的屏幕只是超高分辨率，但是这些都不会对价格便宜的设备有所帮助。 Everything seems to work fine in my browser so I am stumped. 一切似乎在我的浏览器中都可以正常工作，所以我很困惑。
Thanks! 谢谢！
3 个解决方案
解决方案1
5 已采纳 2012-05-13 22:25:23
尝试将此meta标记添加到html的<head>中：
<meta name="viewport" content="width=device-width,initial-scale=1">
解决方案2
0 2012-05-13 21:28:34
Try from this list, hope it will help: 从此列表中尝试，希望对您有所帮助：
/* 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) {
}
解决方案3
0 2012-05-15 09:05:26
As tw16 says, you need width=device-width to tell the browser not to pretend to have a bigger resolution. 正如tw16所说，您需要width=device-width来告诉浏览器不要假装具有更高的分辨率。 On another note, with recent versions of Stylus this is also legal: 另外，对于最新版本的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
Which compiles to: 编译为：
.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;
}
}
I find this helps keeping the media queries related to the specification. 我发现这有助于使媒体查询与规范相关。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.