我有一部 iPhone 4。我知道分辨率在我的风格参数范围内。然而,我在我的智能手机上看到了我的全 Angular 布局。
我能否获得一双新的眼睛来查看源代码,并在我遗漏一些明显的东西时告诉我?它显示在我的浏览器中,但不显示在设备上。
http://georgiaderm.com/mobile/
在我的 HTML 中:
<meta name="viewport" content="width=device-width, initial-scale=1">
在我的 CSS 中:
/* ---------------------------------------------------------------------- */
/* Media Queries
/* ---------------------------------------------------------------------- */
//* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width:1000px) {
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width:768px) and (max-width:1000px) {
body {padding:10px 4px; width:760px;}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width:768px) {
html {background:#fff; padding:10px;}
body {box-shadow:none; margin:0; padding:0; width:auto;}
body > nav {display:none;}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width:480px) and (max-width:768px) {
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width:480px) {
.alpha, .omega {float:none;}
.alpha > * {margin:10px auto;}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width:320px) {
footer div {float:none; width:auto;}
}
编辑:简化了它。
我在这里,有人有在小型设备上停用 JS 选项卡的轻量级策略吗?
最佳答案
我专门在我的媒体查询上定义了 0px,例如:
@media only screen and (min-width:0px) and (max-width:1000px)
{
/* STYLES GO HERE */
}
也许这会有帮助?
关于jquery-ui - 为什么我的 CSS3 媒体查询没有显示在移动设备上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15415097/