¿Cómo segmentar Safari para Mac solamente?

Question

Hola, he cruzado el navegador y he reparado un sitio en todos los buscadores de PC pensables, incluido Safari. Ahora mi diseñador de smart ass me envió una captura de pantalla de todo el diseño contraído en mac. Tengo una idea de cómo resolverlo (reducir el margen de un elemento en unos pocos píxeles), pero no sé cómo orientarme solo a Safari, preferiblemente solo Safari mac.
¿Cuál es la mejor manera de hacer esto?

Answer 1

Aquí hay un script que puede incluir en su página (o en un archivo js separado) que agregará una clase al elemento html para que pueda añadir CSS específica Safari-mac a su archivo css.

(function($){ 
    // console.log(navigator.userAgent); 
    /* Adjustments for Safari on Mac */ 
    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Mac') != -1 && navigator.userAgent.indexOf('Chrome') == -1) { 
     // console.log('Safari on Mac detected, applying class...'); 
     $('html').addClass('safari-mac'); // provide a class for the safari-mac specific css to filter with 
    } 
})(jQuery); 

correcciones Ejemplo css, que pueden estar en la página o en su archivo CSS externo, etc:

/* Safari Mac specific alterations 
* (relies on class added by js browser detection above), 
* to take into account different font metrics */ 
.safari-maC#page4 .section p.fussyDesigner { margin-right: -15px; } 
.safari-maC#page8 .section-footer { width: 694px; } 

Gracias a otras respuestas para las ideas, he tratado de envolver todo para formar una solución completa en esta respuesta.

Answer 2

La cadena de agente de usuario contiene información del sistema operativo, y probablemente ya esté revisando la cadena del agente de usuario para el tipo de navegador.

Un navegador de mac tendrá la cadena "Mac OS X 10." en la cadena de agente de usuario.

Answer 3

Probablemente necesite ejecutar una consulta de expresiones regulares contra el User-Agent y cargar selectivamente un archivo CSS solo para Safari para Mac.

También: ¿Está seguro de que Safari para mac y Safari para Windows presenta la misma página drásticamente diferente?

Answer 4

Me alegro de haber encontrado esta página, siento tu dolor cada vez que usas relleno con la navegación basada en fuentes o pestañas que te encuentras con estos problemas de Mac/PC porque representan las fuentes de forma diferente.

if (navigator.userAgent.indexOf('Mac') >= 0) { 
    $(element).addClass('mac_os') 
} 
// targets macs only` 

Answer 5

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Add your Safari-specific styles here. */ 
} 

Answer 6

Un ejemplo de proporcionar estilos dinámicos para diferentes navegadores:

<?php 
$str = $_SERVER['HTTP_USER_AGENT']; 
$pos1 = strpos($str, "Safari"); 
$pos2 = strpos($str, "Chrome"); 
$pos3 = strpos($str, "MSIE"); 
$pos4 = strpos($str, "Firefox"); 

if($pos1 != '' && $pos2 == '')   // Safari 
$style = "width:200px; height:100px;"; 
else if($pos2 != '')      // Chrome 
$style = "width:180px; height:90px;"; 
else if($pos3 != '')      // IE 
$style = "width:180px; height:90px;"; 
else if($pos4 != '')      // Firefox 
$style = "width:180px; height:90px;"; 
?> 

<div style="<?php echo $style; ?>">Hello world</div>

Answer 7

Uso esto en CSS. que será entregada sólo a Safari

/*\*/ 
    .some-class { 
    /* Here comes some options */ 
    } 
/**/ 

Answer 8

Creo que la respuesta correcta es seleccionada obsoleto y no funciona ahora.

Aquí está la salida de navigator.vendor

Safari en IPAD

Mozilla/5.0 (iPad; CPU OS 8_3 como Mac OS X) AppleWebKit/600.1.4 (KHTML, como Gecko) Versión/8.0 Mobile/12F69 Safari/600.1.4

Safari en Mac

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.2.5 (KHTML, like Gecko) Version/8.0.2 Safari/600.2 0,5 Safari/600.1.4

Como se puede ver Mac aparece en navigator.vendor de ambos escenarios.

Aquí está mi versión

var isSafariMac = /Safari/.test(navigator.userAgent) && 
        !/Mobile/.test(navigator.userAgent) && 
        /Apple Computer/.test(navigator.vendor); 

para que pueda usar esta para apuntar Safari en Mac :)

Answer 9

edificio fuera de la solución de @Tim Abell, puede utilizar un enfoque similar para obtener clases para todos de las principales plataformas y navegadores para una mayor detección y flexibilidad.

Este fragmento agregará una clase para el nombre del navegador y otra para el nombre de la plataforma al elemento <html>. Entonces, por ejemplo, Safari en Mac terminaría siendo <html class="safari mac">.

Javascript/jQuery

//Search for keywords within the user agent string. When a match is found, add a corresponding class to the html element and return. (Inspired by http://stackoverflow.com/a/10137912/114558) 
function addUserAgentClass(keywords) { 
    for(var i = 0; i < keywords.length; i++) { 
    if(navigator.userAgent.indexOf(keywords[i]) != -1) { 
     $("html").addClass(keywords[i].toLowerCase()); 
     return; //Once we find and process a matching keyword, return to prevent less "specific" classes from being added 
    } 
    } 
} 

addUserAgentClass(["Chrome", "Firefox", "MSIE", "Safari", "Opera", "Mozilla"]); //Browsers listed generally from most-specific to least-specific 
addUserAgentClass(["Android", "iPhone", "iPad", "Linux", "Mac", "Windows"]); //Platforms, also in order of specificity 

Con este enfoque, puede hacer cosas como:

CSS

.safari { /* Safari only */ } 
.mac { /* Mac only */ } 
.safari.mac { /* Safari Mac */ } 
html:not(.safari) { /* All browsers except for Safari */ } 
html:not(.safari.mac) { /* All browsers except for Safari Mac */ }