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

Question

我用 WordPress 开发了一个网站，看起来不错。但在某些移动浏览器上它打破了一些 CSS。在 Opera Mini 中，它不会 Margin:-30px; 但在移动设备上 chrome 它可以正常工作。我不知道为什么会出现这个问题。你们能给我一些建议吗？我浏览了其他一些大网站，例如mashable.com，他们也有同样的问题。

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

Answer 1

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

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

Answer 2

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

另见 window.navigator.userAgent

Answer 3

不需要JS。有一些鲜为人知的 CSS 功能会根据浏览器应用 CSS。有些人认为他们 css 黑客。

火狐：

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

或者把这个放在具体声明的前面：

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

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

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

Safari & chrome

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

野生动物园：

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

这是否回答了您的问题？

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

Can we use different CSS for different mobile browsers?

javascript

html

css

jquery-mobile

mobile-browser