単純な条件ステートメント、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]>
このPsuedoコードはjQuery/JS/HTMLまたはCSS PHP etcなどで実行できますか?
CSSでは、ブラウザーの検出を実現する方法はありません。ただし、PHP、ASPおよびその他のプログラミング言語を使用すると、ページ内でブラウザーを検出できます。ここでは、その長所と短所を説明することはできません。ブラウザの検出とウェブ標準については良いですが、ここにリストがあります。
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}';
}
// 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";
}
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
}
CSSでのみこれを行うには。
この「ハック」でFirefoxをターゲットにできます:
@-moz-document url-prefix() {...}
そしてChrome&Safariは次のように一緒に:
@media screen and (-webkit-min-device-pixel-ratio:0) {...}
しかし、必ずしも推奨されるわけではありません...
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" );
}
EDIT:jQuery.comによると:
webkit(ChromeおよびSafari)
サファリ(非推奨)
opera
msie(Internet Explorer)
mozilla(Firefox)
ソース: JQueryサイト
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;
?>