14

是否有简单的条件语句、css 命令、html、jquery、javascript 或简单的 PHP 动态方式检测当前浏览器？

<!if firefox>
    .element { top:4px; }
<![endif]>
<!if chrome>
    .element { top:6px; }
<![endif]>
<!if ie>
    .element { top:8px; }
<![endif]>
<!if opera>
    .element { top:10px; }
<![endif]>
<!if safari_webkit>
    .element { top:12px; }
<![endif]>

这个伪代码可以用 jQuery/JS/HTML 或 CSS PHP 等完成吗？

4

4 回答 4

19

使用 CSS 无法实现浏览器检测。然而，使用 PHP、ASP 和其他编程语言，您可以在页面内进行浏览器检测。我不是在这里告诉你它的利弊——我认为你知道浏览器检测和网络标准的优缺点，但这里是列表。

PHP 解决方案。

if(isset($_SERVER['HTTP_USER_AGENT'])){
    $agent = $_SERVER['HTTP_USER_AGENT'];
}

然后，将其与您想要的进行比较

为了与例如“firefox”进行比较，您应该这样做：

if(strlen(strstr($agent,"Firefox")) > 0 ){      
    $browser = 'firefox';
}
if($browser=='firefox'){
    echo '<style type="text/css">.element{top:2px}';
}

jQuery 解决方案。

// Safari CSS and Webkit Google Chrome
if ($.browser.webkit) {
   $("#element").css('top', '2px');
} else if ( $.browser.safari ) //not fully supported on 1.7 jQuery {
   $("#element").css('top', '2px');
// Opera CSS
} else if ( $.browser.opera ) {
   $("#element").css('top', '2px');
// Internet Explorer CSS
} else if ( $.browser.msie ) {
   $("#element").css('top', '2px');
// Mozilla FireFox CSS
} else if ( $.browser.mozilla ) {
   $("#element").css('top', '2px');
// Normal Revert, careful and note your the use of !important
} else {
   $("#element").css('top', '2px');
   // You can have normal JavaScript between these too
   document.getElementById("element").style.top="2px";
}

Mootools 解决方案。

if (Browser.ie){
    // This code will only run in IE
}

if (Browser.firefox2){
    // This code will only run in Firefox 2
}
if (Browser.firefox){
    // This code will only run in Firefox 
} 
if (Browser.chrome){
    // This code will only run in Chrome
} 
if (Browser.opera){
    // This code will only run in Chrome
}   
if (Browser.ie6 || Browser.ie7){
    // Please upgrade your browser
}
// Also notice you can use Engine.trident
if(Browser.Engine.trident) {

}

原型解决方案。

if(Prototype.Browser.IE){
  // do something IE specific
}
if(Prototype.Browser.Opera){
  // do something Opera specific
}
if(Prototype.Browser.WebKit){
  // do something WebKit specific
}
if(Prototype.Browser.MobileSafari){
  // do something MobileSafari specific - iPhone etc
}
if(Prototype.Browser.Gecko){
  // do something Gecko specific
}
于 2012-08-23T10:54:21.040 回答
3

仅使用 CSS 执行此操作。

您可以使用此“hack”来定位 Firefox：

@-moz-document url-prefix() {...}

和 Chrome 和 Safari 一起像这样：

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

但不一定推荐...

于 2014-06-04T16:54:57.250 回答
1

使用 javascript：

navigator.appCodeName

存储浏览器代号：

navigator.appName

是浏览器的名称。

但我建议使用 jQuery 来提高效率并减少麻烦：

if ($.browser.webkit) {
   $("#div ul li").css( "display","inline-table" );
} else if ( $.browser.msie ) {
   $("#div ul li").css( "display","inline" );
} else {
   $("#div ul li").css( "display","inline-table" );
}

编辑：根据 jQuery.com：

  • webkit（Chrome 和 Safari）

  • 野生动物园（已弃用）

  • 歌剧

  • msie (Internet Explorer)

  • 火狐浏览器）

资料来源：jQuery 网站

于 2012-08-23T10:57:46.757 回答
0

在 php 中，您可以使用此代码来检测浏览器

<?php
  $msie = strpos($_SERVER["HTTP_USER_AGENT"], 'MSIE') ? true : false;
  $firefox = strpos($_SERVER["HTTP_USER_AGENT"], 'Firefox') ? true : false;
  $safari = strpos($_SERVER["HTTP_USER_AGENT"], 'Safari') ? true : false;
  $chrome = strpos($_SERVER["HTTP_USER_AGENT"], 'Chrome') ? true : false;
?>
于 2014-04-01T10:14:08.583 回答