2010-04-18 5 views
5

¿Hay alguna forma de detectar un sistema operativo mediante JQuery o CSS? Con CSS Me refiero a algo similar a <![if !IE]>¿Cómo puedo usar una fuente específica solo cuando el usuario ejecuta Linux?

necesito utilizar una fuente específica sólo cuando la página web se ve usando Linux y no querer incluir esto con otro sistema operativo de

+5

Para las fuentes, en particular, puede especificar una lista y si la primera fuente no se encuentra en ese sistema en particular, se utiliza la siguiente repliegue, a continuación, el siguiente, y así sucesivamente. –

+0

Cuando Stanford instaló por primera vez un sistema de tiempo compartido para estudiantes de pregrado, fue supervisado por un ubergeek (¿Richard Gabriel?) Que respondió a todas mis preguntas con "Te puedo decir eso, ¿pero es eso lo que realmente quieres saber?" Esta pregunta me recuerda esos días ... – Spike0xff

Respuesta

8

Aunque no responde directamente la pregunta de "detección de O/S", es posible que pueda lograr el efecto deseado de seleccionar una fuente usando la propiedad CSS font-family.

Esta propiedad le permite elegir una lista de fuentes, donde el navegador intentará hacer coincidir las fuentes disponibles en el sistema. Se lee de izquierda a derecha y utilizará la primera fuente disponible:

body 
{ 
    font-family: "Calibri", "Arial", "Sans Serif" 
} 

En este caso, si el tipo de letra "Calibri" no está disponible, el sistema utilizará "Arial". Si no se puede encontrar "Arial", utilizará todas las fuentes disponibles en la familia "Sans Serif".

Con esto puede especificar primero su fuente específica de Linux y saber que otras plataformas sin la fuente disponible también se mostrarán utilizando una fuente adecuada.

+2

¿Qué impide que alguien instale estas fuentes en otro sistema? ¿Qué pasa con los sistemas que no tienen instaladas estas fuentes? Esta es una forma terrible de detectar SO. – Brad

+3

Como dice mi respuesta, esta no es una respuesta para tratar de detectar el sistema operativo, sino cómo mostrar una fuente en particular según lo que esté disponible. –

+0

Lo siento, leí mal tu publicación ayer. Si tuviera que hacer una edición, me retractaría alegremente de mi voto negativo. (ASÍ NO ME DEJARÁ QUITARLO SIN UNA EDICIÓN DE 1 CARACTER O MENOS, YA QUE ÉSTE YESY DÍA.) ¡Siento el problema! – Brad

13

examinar navigator.userAgent

En general, puede encontrar lo que busca con rx simple, pero para hacerlo requerirá una comprensión básica del olfateo. Puede encontrar un buen ejemplo here.

NOTA: no estoy sugiriendo que use una biblioteca de olfateo, solo que se familiarice con lo que necesita buscar.

En cuanto a las fuentes dinámicamente controladas por el sistema operativo, creo que, salvo un caso extremo que no se indica en su pregunta, simplemente definir un font stack es su mejor opción.

3

Me gusta hacer una combinación de jQuery y CSS para resolver este problema. Este enfoque fue inspirado por modernizr, que agrega dinámicamente todas las habilidades del navegador como clases al elemento html.

// Detect Browser 
$.each(jQuery.browser, function(i, val) { 
    $("html").addClass(i); 
    $("html").addClass(val); 
}); 
// Detect Operating System 
$("html").addClass(navigator.platform); 

El resultado de ejecutar el código anterior me da esta salida cuando veo una página e inspeccionar el DOM. Un problema es que estoy en Mac con Chrome, pero el objeto de navegador de jQuery cree que estoy usando Safari, que también es un navegador webkit.

<html class="webkit version 535.1 safari MacIntel"> 

Si imprime navigator.userAgent de javascript obtendrá un resultado con toneladas de información de este tipo

Mozilla-5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.202 Safari/535.1 

msie es la etiqueta jQuery.browser asignado para IE para que yo pudiera hacer algo como esto en mi CSS sin necesidad de instrucciones condicionales si añado el navegador como una clase a las etiquetas hTML o del cuerpo:

h1 { /* my regular h1 styles */ } 

.msie h1 { /* IE edge case styles for h1 treatment */ } 

en jQuery usted podría utilizar su fantástica selector motor para buscar versiones # y varias combinaciones para atacar problemas directamente que solo se aplican a versiones de navegador y combinaciones de sistema operativo específicas. Simplemente genere toda la clase userAgent string html, solo asegúrese de limpiar esa cadena eliminando los caracteres /().

http://api.jquery.com/jQuery.browser/

@Sky tenían un gran enlace para este http://www.quirksmode.org/js/detect.html que se podría utilizar para obtener el navegador más precisa la información de sistema operativo que se podría añadir como clases al elemento HTML.

1

debes revisar selector del navegador de Rafael Javascript http://rafael.adm.br/css_browser_selector/ - usted será capaz de definir en navegador, OS- y Brower/os-combo específica CSS, de una forma fácil formulario:

(.os)(.browser) selector {...;} (así, por ejemplo, .opera {color: red;})

es compatible con una gran cantidad de sistemas operativos y una gran cantidad de navegadores

Cuestiones relacionadas