3

Quero que no Google Chrome meu site tenha width: Xpx; e no Safari tenha width: Ypx;, isso é possível?

1

1 Resposta 1

1

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']
    });
5
  • Você respondeu como identificar, não como fazer o que ele pedia.
    – user2692
    Commented 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 =)
    – user2692
    Commented 18/02/2015 às 20:52
  • Obrigado, estou reformulando a resposta, concordo com seu ponto de vista. Commented 18/02/2015 às 20:57
  • 1
    Lindo! Exatamente o que pensava e mais completo ainda...
    – user2692
    Commented 18/02/2015 às 22:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .