Html @media only screen and (max-width: 479px) 不适用于移动设备
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15765962/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@media only screen and (max-width: 479px) not working for mobile
提问by Shilp
My mobile version (max-width : 479px) does not show #111 for the background color. Instead, #000 appears as the background color. Please help me.
我的移动版本 (max-width : 479px) 没有显示 #111 的背景颜色。相反，#000 显示为背景颜色。请帮我。
@media only screen and (max-width: 1024px) {
body{
background-color:#ff0000;
}
}
@media only screen and (max-width: 767px)
{
body{
background-color:#000;
}
}
@media only screen and (max-width: 479px)
{
body{
background-color:#111;
}
}
回答by David Taiaroa
In the head of your document, make sure you have
在你的文件的头部，确保你有
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If you omit this, then many devices will scale the page to fit the viewport.
如果您省略此项，则许多设备将缩放页面以适应视口。
Good luck
祝你好运
回答by Billy Moat
Do you have a viewport meta tag specified? I'd suggest changing 479 to 480 too.
您是否指定了视口元标记？我也建议将 479 更改为 480。
Here's an example of a viewport meta tag - this is the one I use on my own responsive website.
这是一个视口元标记的示例 - 这是我在自己的响应式网站上使用的标记。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
回答by Pankaj Upadhyay
Check in tag
签入标签
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
回答by Matthias Wegtun
Maybe you can specifiy by using
也许你可以通过使用来指定
@media only screen and (min-width:768px) and (max-width: 1024px) {}
because if a screen is 200px in width it would comply to all the other rules it's not exceeding their width
因为如果屏幕的宽度为 200 像素，它将符合所有其他规则，它不会超过其宽度
Have a great day
祝你有美好的一天
回答by apaul
Try using device width rather than just screen size. Many mobile / tablet devices will open pages in an overview thus screen size will be ignored.
尝试使用设备宽度而不仅仅是屏幕尺寸。许多移动/平板设备将在概览中打开页面，因此屏幕尺寸将被忽略。
Also some mobile devices will respond to the @media handheldselector.
一些移动设备也会响应@media handheld选择器。
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
/*Ipad*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
/* Smartphones (portrait and landscape)*/
@media only screen and (-webkit-min-device-pixel-ratio : 1.5)
/*Iphone 4*/
@media only screen and (min-device-pixel-ratio : 1.5)
/*Iphone 4*/
@media handheld and (max-width: 960px)
/*handheld*/
回答by Leroy Meijer
Why not use Twitter Bootstrap? http://twitter.github.com/bootstrap/
为什么不使用 Twitter Bootstrap？ http://twitter.github.com/bootstrap/
