Quero que no Google Chrome meu site tenha width: Xpx;
e no Safari tenha width: Ypx;
, isso é possível?
-
Por javascript acredito que você consegue determinar qual arquivo carregar para cada browser... exemplos que você pode adaptar a sua necessidade: prodwebdigital.blogspot.com.br/2013/06/… e tableless.com.br/identificando-os-ies– Rafael WithoeftCommented 18/02/2015 às 17:51
Adicione um comentário
|
1 Resposta
Você pode fazer isso de diversas formas...
Javascript "puro"
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "Other";
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
this.versionSearchString = data[i].subString;
if (dataString.indexOf(data[i].subString) !== -1) {
return data[i].identity;
}
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index === -1) {
return;
}
var rv = dataString.indexOf("rv:");
if (this.versionSearchString === "Trident" && rv !== -1) {
return parseFloat(dataString.substring(rv + 3));
} else {
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
}
},
dataBrowser: [
{string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
{string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
{string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
{string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
{string: navigator.userAgent, subString: "Safari", identity: "Safari"},
{string: navigator.userAgent, subString: "Opera", identity: "Opera"}
]
};
BrowserDetect.init();
document.write("você está usando <b>" + BrowserDetect.browser + "</b> na versão <b>" + BrowserDetect.version + "</b>");
Exemplo de utilização
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "Other";
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
this.versionSearchString = data[i].subString;
if (dataString.indexOf(data[i].subString) !== -1) {
return data[i].identity;
}
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index === -1) {
return;
}
var rv = dataString.indexOf("rv:");
if (this.versionSearchString === "Trident" && rv !== -1) {
return parseFloat(dataString.substring(rv + 3));
} else {
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
}
},
dataBrowser: [
{string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
{string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
{string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
{string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
{string: navigator.userAgent, subString: "Safari", identity: "Safari"},
{string: navigator.userAgent, subString: "Opera", identity: "Opera"}
]
};
BrowserDetect.init();
if (BrowserDetect.browser === "Chrome") {
$("body").css('background','lightblue');
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<body>
</body>
modernizr
Uma outra alternativa, seria utilizar o modernizr para determinar os recursos disponíveis no Browser do cliente, com modernizr você pode escrever estilos de forma arbitraria conforme a disponibilidade de recursos, olhe o exemplo
modernizr Exemplo css
.loginBox {
box-shadow:0 10px 10px rgba(0, 0, 0, 0.3);
}
.no-boxshadow .loginBox {
border: 1px solid #CCC;
border-bottom: 3px solid #CCC;
}
Caso o recurso box-shadow não tenha suporte pelo navegador, style alternativo vai ser .no-boxshadow .loginBox
Yepnopejs
Você pode combinar qualquer um dos recursos mencionados acima com Yepnopejs para carregar arquivos css ou js sobre alguma condição especial.
Exemplo com modernizr
yepnope({
test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
yep : 'normal.js',
nope : ['polyfill.js', 'wrapper.js']
});
Exemplo com a função js
BrowserDetect.init();
yepnope({
test : BrowserDetect.browser == Chrome,
yep : 'normal.js',
nope : ['polyfill.js', 'wrapper.js']
});
-
Você respondeu como identificar, não como fazer o que ele pedia.– user2692Commented 18/02/2015 às 20:47
-
Obrigado pelo feedback, isso se encontra no meio da resposta, "Veja esse exemplo com a função acima" if (BrowserDetect.browser === "Chrome") { $("body").css('background','lightblue'); } Não sei se foi você quem negativou, mas seria interessante comentar antes para evitar possíveis enganos, de qualquer forma obrigado pelo feedback. Commented 18/02/2015 às 20:50
-
acho que seria interessante demonstrar a maneira correta em cada método. Sim, eu fui quem deu o downvote =v... Vou reavaliar a resposta =)– user2692Commented 18/02/2015 às 20:52
-
Obrigado, estou reformulando a resposta, concordo com seu ponto de vista. Commented 18/02/2015 às 20:57
-
1Lindo! Exatamente o que pensava e mais completo ainda...– user2692Commented 18/02/2015 às 22:30