用于移动设备的 CSS 有时会恢复到原始状态
Posted
技术标签:
【中文标题】用于移动设备的 CSS 有时会恢复到原始状态【英文标题】：CSS for mobile sometimes reverts back to original 【发布时间】：2011-07-02 20:22:52 【问题描述】：所以大多数时候我的样式表都能正常显示。标准/原始版本总是完美无缺，但有时从移动设备查看移动版本似乎会被忽略
我将它们指定如下：
<link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" />
<link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 799px)" />
我正在使用 Droid X 以纵向模式查看页面，因此设备宽度不应超过上面指定的最大宽度，但有时它仍会随机恢复到原始 css 页面。
有什么办法阻止它这样做？
【问题讨论】：
可能是安卓浏览器的bug，是iphone还是opera for android出现这种情况 如果我没记错的话，它也发生在 iphone 上，但是今天早上我们的 mac 出现了一些问题，所以我还不能在模拟器上测试它......我的部门没有人拥有 iPhone。 当你使用max-width: 799px时会发生同样的情况吗？
横屏模式是否也会出现同样的问题？
【参考方案1】：
确保您的 standard.css 不会影响您希望通过 mobile.css 看到的级联。看起来移动设备会先加载您的standard.css，然后再加载mobile.css - 因此两个样式表中的样式都会影响显示。我通常将样式表链接元素包装在仅向移动设备显示移动样式表的逻辑中，而不是同时显示两个样式表。
此外，不要忘记包含此元标记以确保您的页面正确缩放到设备尺寸：
<meta name="viewport" content="width=device-width" />
【讨论】：
我通常将我的样式表链接元素包装在仅向移动设备显示移动样式表的逻辑中 - 而不是同时显示两个样式表。 我认为他的意思是为您的第一个 CSS 导入添加一个条件，这样它就不会被加载。 media="All (min-width:800)" 的性质可能有助于浏览器避免加载与“移动版”发生冲突的 CSS 桌面版。【参考方案2】：我以前见过这种情况。我相信是身体元素的大小发生了变化。正确的文档类型很重要。应该是：
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
【讨论】：
实际上，WAP docType，虽然对某些设备（例如 Blackberry）完全有效，但在 iPhone/Android 上不需要，它们与 HTML5 doctype 完美配合，例如： 【参考方案3】：尝试使用“手持”媒体类型。
<link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" />
<link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="handheld" />
【讨论】：
注意事项：iPhone 不支持手持媒体类型，因此至少在 iPhone 中不会产生预期的效果。更多信息：***.com/questions/3893342/… @Jim - 你是对的。大多数较新的触摸屏设备都不能很好地支持手持设备。【参考方案4】：也许将 media="screen" 用于standard.css？也许有帮助（：
或者检查服务器端的用户代理。如果是移动设备只加载移动css，否则加载standard.css。
我使用 WURFL 来确定它是否是移动设备...
【讨论】：
以上是关于用于移动设备的 CSS 有时会恢复到原始状态的主要内容，如果未能解决你的问题，请参考以下文章