我们可以为不同的移动浏览器使用不同的CSS吗

Question

我使用WordPress开发了一个网站，看起来不错。但在一些移动浏览器上，它打破了一些CSS。在Opera Mini中，它没有采用Margin:-30px;，而是采用移动镀铬技术。我不知道为什么会出现这个问题。你们能给我一些建议吗？我浏览了一些其他大型网站，如mashable.com，他们也有同样的问题。

所以我的问题是我可以为不同的移动浏览器使用不同的CSS吗？或者我可以为不同的移动浏览器使用完全不同的布局吗？

Answer 1

请求带有user agent string，用于标识正在使用的浏览器。使用useragent = navigator.userAgent读取此字符串并根据其值调整样式表实际上很常见。

另见window.navigator.userAgent

Answer 2

不需要JS。有一些鲜为人知的CSS功能，它们基于浏览器应用CSS。有人认为他们是css hacks。

火狐：

＆＃13;

＆＃13;

@-moz-document url-prefix() { CSS DECLARATIONS }

＆＃13;

＆＃13;

＆＃13;

或者将其放在特定声明的前面：

＆＃13;

＆＃13;

body:not(:-moz-handler-blocked) .whateverclass { CSS }

＆＃13;

＆＃13;

＆＃13;

对于IE，您可以加载单独的样式表：

＆＃13;

＆＃13;

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie_sheet.css" />
<![endif]-->

＆＃13;

＆＃13;

＆＃13;

Safari＆amp;铬

＆＃13;

＆＃13;

@media screen and (-webkit-min-device-pixel-ratio:0) { CSS DECLARATIONS}

＆＃13;

＆＃13;

＆＃13;

Safari浏览器：

＆＃13;

＆＃13;

html[xmlns*=""]:root .whateverclass { CSS }

＆＃13;

＆＃13;

＆＃13;

这会回答你的问题吗？

Answer 3

非主题： 某些浏览器需要在新的CSS功能之前放置前缀。 http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm 这样就可以激活新功能。

关于主题： 我自己发现了一些可能有用的东西。 Detecting a mobile browser 这是关于检测移动浏览器的帖子。也许如果你修改这个js函数，你将得到你需要的东西。