Question

我知道为特定的浏览器或操作系统编写特定的CSS代码并不正确，但在我正在构建的网站中，某些元素在特定的浏览器中无法很好地呈现。例如，IE8中不支持某些元素，或者在小型iPhone显示屏中看起来很奇怪。

因此我的问题是 - 使用CSS是否可以识别用户浏览器和操作系统并允许我编写不同的显示选项？

Dank u wel。

Answer 1

可悲的是，我不相信每个系统只有纯css就可能了。

但是你可以使用css和js的组合来查看系统。

见这里：http://rafael.adm.br/css_browser_selector/

Answer 2

您无法使用CSS嗅探操作系统或浏览器，但您可以使用@media查询来定位不同的屏幕尺寸，例如：

@media screen and (max-width: 1000px) { ... }

以上适用于小型台式机和笔记本电脑屏幕。

@media screen and (max-width: 700px) { ... }

以上是iPad和非常小的桌面/笔记本电脑屏幕。

@media screen and (max-device-width: 480px) { ... }

以上是iPhone 3GS和移动设备。

然而，新的iPhone 4与史蒂夫乔布斯全唱的全视觉“视网膜”显示意味着它的像素比率为2-1意味着1像素实际上在浏览器中显示为2x2像素使其分辨率（960x640 - 这意味着它将触发iPad布局而不是移动设备布局）所以这需要另外的媒体查询（仅限webkit支持）：

@media screen and (-webkit-min-device-pixel-ratio: 2) { ... }

要定位不同的浏览器，您需要使用HTML if语句：

<!--[if IE]>
According to the conditional comment this is Internet Explorer
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]-->

然后只需在这些条件中链接您的CSS样式表

Answer 3

要根据屏幕尺寸定位设备，请使用CSS media queries：

@media screen and (max-device-width: 10cm) {/* Small screen, like iphone */ }

您可以使用conditional comments定位IE版本：

<!--[if lt IE 9]>
<style>/* IE5,6,7,8 */</style>
<![endif]-->

Answer 4

您需要使用条件注释来提供特定于IE的样式表和媒体查询来处理移动浏览器。

<!--[if IE 8]>
    ... load stylesheets, JS or whatever here.
<![endif]-->

有关媒体查询，请参阅http://www.w3.org/TR/css3-mediaqueries/和......好，http://www.google.com/search?q=media+queries+css3。

Answer 5

您可以随时使用此处列出的CSS黑客：http://www.quirksmode.org/css/condcom.html

Answer 6

嗯，有browser CSS hacks利用CSS解析器引擎中的已知错误，但除非你知道你在做什么，否则不建议使用它们。

示例：

selector { property: value; } /* regular, valid CSS */
selector { *property: value; } /* will only work in IE7 and older IEs */
selector { _property: value; } /* will only work in IE6 and older IEs */

Answer 7

要区分不同的媒体类型（打印，屏幕，移动等），请查看CSS Media Type规则。对于浏览器特定的黑客攻击，请查看this article。

Answer 8

无法使用CSS识别浏览器或操作系统。它仅供演示。您可以使用CSS hacks定位浏览器，但这只会将CSS提供给浏览器，而不是检测它。

您可以使用JS来检测浏览器，就像CSS browser selector插件那样。

Answer 9

我会通过服务器端（php或你正在使用的任何东西）来做。你所做的就是将浏览器/操作系统特定的css放在一个单独的文件中并在检测到该浏览器时加载它（你可以通过简单的if语句通过服务器端脚本来检测）

Answer 10

更改特定操作系统的CSS：

我编写了这个函数，可以识别你的操作系统是XP还是不同的，并将特定的CSS作为结果。

function changeStyle() {
var css = document.createElement('link');
css.rel="stylesheet";
css.type = 'text/css';

if (navigator.appVersion.indexOf("Windows NT 5.1")!=-1){ /* if is windowsXP */
css.href = 'styleXP.css';
} else {
css.href = 'style7.css';
}

document.getElementsByTagName("head")[0].appendChild(css);
return false;
}

使用CSS识别浏览器和操作系统？

10 个答案: