Browser & OS als Body-Klasse

Ich hätte gerne das Betriebssystem und den Browser in der Body-Klasse. Ich brauche das für pixelgenaues Styling, weil sich die Schriften in verschiedenen OS/Browser-Konfigurationen nicht gleich verhalten. Nach etwas googeln und experimentieren. Die einzige Art, wie ich denken konnte, dies zu tun war eine indexOf zu verwenden ...Browser & OS als Body-Klasse

var OSName="Unknown OS"; 
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows"; 
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS"; 
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX"; 
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux"; 

var agt=navigator.userAgent.toLowerCase(); 
if (agt.indexOf("opera") != -1) return 'Opera'; 
if (agt.indexOf("firefox") != -1) return 'Firefox'; 
if (agt.indexOf("safari") != -1) return 'Safari'; 
if (agt.indexOf("webkit") != -1) return 'Webkit'; 
if (agt.indexOf("msie") != -1) return 'Internet Explorer'; 
if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';

Ich denke, es ist nicht eine sehr schöne Lösung. Gibt es eine Regex, die das könnte? Oder gibt es einen schnelleren Weg, dies zu tun?

Quelle

2010-12-01 meo

Wenn Sie wirklich auf Browser-Sniffing zurückgreifen wollen, viel Glück - das wird trotzdem scheitern, da das Rendern auch von installierten Schriftarten und Browser-Version abhängt (vor allem IE6 vs IE7 vs IE8 vs dem kommenden IE9). Wenn Sie eine pixelgenaue Seite benötigen, ist HTML das falsche Werkzeug dafür - machen Sie Ihre Seite stattdessen zu einem riesigen Bild, das ist die einzige Möglichkeit, sicher zu sein (es wird zahlreiche andere Probleme haben, aber es wird pixelgenau sein). Auch UA Spoofing. – Piskvor

das Problem für mich ist mehr das Betriebssystem als der Browser. Das Textrendering in MacOS und Windows ist sehr unterschiedlich. Ich bin immer wieder überrascht, wie hässlich die Schriften in Windows aussehen. Aber zumindest kann ich die Zeilenhöhe des Buchstabenabstandes und die Schriftgröße unterschiedlich steuern. Aber es ist völlig möglich, es pixelperfect zu tun, wenn der Designer Web-Erfahrung ist – meo

Sie könnten Regex verwenden, aber es würde es nicht hübscher machen.

Grundsätzlich Scannen von User-Agent-Zeichenfolgen für Browser/OS/Version nie wird schön sein.

Hier ist etwas ein wenig hübscher mit jQuery ...

// Add some classes to body for CSS hooks 

// Get browser 
$.each($.browser, function(i) { 
    $('body').addClass(i); 
    return false; 
}); 


// Get OS 
var os = [ 
    'iphone', 
    'ipad', 
    'windows', 
    'mac', 
    'linux' 
]; 

var match = navigator.appVersion.toLowerCase().match(new RegExp(os.join('|'))); 
if (match) { 
    $('body').addClass(match[0]); 
};

Diese nicht ganz Ihnen die gleichen Klassen wie oben geben, aber genug, um verschiedenen Betriebssystem- und Browser zu unterscheiden.

Beispiel: Sie Firefox unter Windows mit ...

body.windows.mozilla { 
    background: blue; 
}

See it!

Or use a plugin.

Quelle

2010-12-01 10:12:57 alex

Ich brauche nicht die Version, ich brauche nur den Browser und das OS – meo

aussehen ziemlich sexy für mich. :) +1 und der richtige awnser, wenn Sie das gleiche mit dem OS tun können :) – meo

@meo jQuery hat nichts eingebaut, um das Betriebssystem zurück zu geben. Sie müssen das Plugin verwenden, oder ich spreche, ich kann etwas schnell programmieren :) – alex

für den Browser info Ziel könnte, wenn jQuery verwenden, gibt es $.browser

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

Quelle

2010-12-01 10:17:03

yeah, aber es ist genau die gleiche Sache, Sie müssen für jeden Browser überprüfen und einen Wert zurückgeben ... – meo

Browser & OS als Body-Klasse

Antwort

Verwandte Themen