移动CSS有时会恢复原状
[英]CSS for mobile sometimes reverts back to original
问题描述
So most of the time my stylesheets appear properly. 
所以大部分时间我的样式表都显示得很好。 The standard/original one always works flawlessly, however it seems sometimes the mobile one is disregarded when looked at from a mobile device 标准/原始的一个总是完美无缺，但是从移动设备看时，有时候移动设备似乎被忽视了
I have them designated as follows: 我把它们指定如下：
<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)" />
I'm using a Droid X to view the page, in portrait mode, so the device width shouldn't be exceeding the max-width specified above, but sometimes, randomly, it still reverts back to the original css page. 我正在使用Droid X以纵向模式查看页面，因此设备宽度不应超过上面指定的最大宽度，但有时，随机，它仍然会恢复到原始的css页面。
Any way to keep it from doing so? 有什么方法可以阻止它这样做？
4 个解决方案
解决方案1
2 2011-02-26 19:20:20
Make sure your standard.css isn't affecting the cascade of what you expect to see with the mobile.css. 确保您的standard.css不会影响您希望通过mobile.css看到的级联。 It looks as though a mobile device will load your standard.css first then the mobile.css - so styles in both stylesheets are affecting display. 看起来移动设备首先会加载你的standard.css然后再加载mobile.css - 因此两个样式表中的样式都会影响显示。 I usually wrap my stylesheet link elements in logic that only displays a mobile stylesheet to a mobile device - not both stylesheets at the same time. 我通常将样式表链接元素包装在逻辑中，该逻辑仅向移动设备显示移动样式表 - 而不是同时显示两个样式表。
Also, don't forget to include this meta tag to make sure your page is being scaled correctly to the device dimensions: 此外，请不要忘记包含此元标记，以确保您的网页正确缩放到设备尺寸：
<meta name="viewport" content="width=device-width" />
解决方案2
0 2011-02-25 16:37:34
I've see that happen before. 我已经看到过这种情况。 I believe it was the size of the body element that was getting changed. 我相信身体元素的大小正在改变。 The correct doctype is important. 正确的doctype非常重要。 It should be: 它应该是：
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
解决方案3
0 2011-02-25 18:13:12
Try using the media type "handheld". 尝试使用“掌上电脑”媒体类型。
<link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" />
<link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="handheld" />
解决方案4
-1 2011-02-23 21:18:01
Maybe use media="screen" for standard.css? 也许使用media =“screen”for standard.css？ Maybe it helps (: 也许它有帮助（：
Or check user-agent in server side. 或者检查服务器端的用户代理。 If it is mobile device loading only mobile css otherwise load standard.css. 如果是移动设备只加载移动css，否则加载standard.css。
I use WURFL to find out if it is mobile device... 我使用WURFL来确定它是否是移动设备...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.