2010-05-15 7 views
15

Hallo Ich habe Cross-Browser eine Website auf allen denkbaren PC-Browsern, einschließlich Safari. Jetzt schickte mir mein schlauer Ass-Designer einen Screenshot des gesamten Layouts, das auf dem Mac zusammenbrach. Ich habe eine Idee, wie man es lösen kann (reduzieren Sie den Rand eines Elements um ein paar Pix), aber ich weiß nicht, wie Sie nur Safari, vorzugsweise Safari Mac nur ausrichten.
Was ist der beste Weg, dies zu tun?Wie kann ich Safari nur für Mac ausrichten?

Antwort

21

Hier ist ein Skript, das Sie auf Ihrer Seite (oder in einer separaten JS-Datei) enthalten können, die eine Klasse mit dem HTML-Elemente hinzufügen, so dass Sie Safari-mac spezifische CSS Ihrer CSS-Datei hinzufügen können.

(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); 

Beispiel CSS-Fixes, die in Seite oder in Ihrer externen CSS-Datei etc sein:

/* 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; } 

Dank anderen Antworten für Ideen, ich habe versucht, alles einpacken in eine Komplettlösung in dieser Antwort.

+0

Hat jemand dies in letzter Zeit zur Arbeit gebracht? Ich kann nicht scheinen. – miles

+0

@Tim Abell - Danke für Ihre Lösung! Ich benutzte es als Inspiration für etwas, das ich brauchte, mit ein bisschen mehr Funktionalität. (http://stackoverflow.com/a/30540862/114558) Also, danke, dass du mich in die richtige Richtung gestartet hast! :) – rinogo

+2

Danke. Das hat gut funktioniert. FYI, für Entwickler, die dies auf Safari sowohl unter Windows als auch Mac nutzen möchten, entfernen Sie einfach die Bedingung: 'navigator.userAgent.indexOf ('Mac')! = -1'. –

4

Die User-Agent-Zeichenfolge enthält Betriebssysteminformationen, und Sie überprüfen wahrscheinlich bereits die User-Agent-Zeichenfolge für den Browsertyp.

Ein Mac-Browser wird die Zeichenfolge "Mac OS X 10." in der User-Agent-Zeichenfolge.

2

Sie müssen wahrscheinlich eine Regex-Abfrage für den User-Agent ausführen und selektiv eine CSS-Datei nur für Safari für Mac laden.

Auch: Sind Sie sicher, dass Safari für Mac und Safari für Windows die gleiche Seite drastisch anders machen?

+0

ja, ich habe Safari für Sieg, hat Designer-Safari für mac – Moak

+0

@Moak - Nein, ich meinte, haben sie nicht im Wesentlichen den gleichen Motor. Ich kann mir nicht vorstellen, dass die Seite "auseinander fällt" vielleicht, dass die Schriften etwas aus sind. –

+0

er sagte, es ist um "ein paar px". Ich stimme zu, dass es sich möglicherweise um ein Problem handelt, das sich auf die Darstellung von Schriften bezieht. Nur eine Vermutung. – Rob

3

Froh, dass ich diese Seite gefunden habe, fühle ich Ihre Schmerzen, wenn Sie Padding mit font-based Navigation oder Tabs verwenden, die Sie in diesen Mac/PC-Problemen laufen, weil sie Schriftarten anders rendern.

if (navigator.userAgent.indexOf('Mac') >= 0) { 
    $(element).addClass('mac_os') 
} 
// targets macs only` 
0
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Add your Safari-specific styles here. */ 
} 
+2

Das zielt * sowohl * Safari und Chrome, die nicht die Voraussetzung ist. – philw

0

Ein Beispiel für dynamische Stile für verschiedene Browser bereitstellt:

<?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>

-3

verwenden in CSS. Es wird nur in Safari gerendert

3

Ich denke, die ausgewählte richtige Antwort ist veraltet und funktioniert jetzt nicht. Hier

ist die Ausgabe von navigator.vendor

Safari auf dem iPad

Mozilla/5.0 (iPad, CPU OS 8_3 wie Mac OS X) AppleWebKit/600.1.4 (KHTML, wie Gecko) Version/8.0 Mobile/12F69 Safari/600.1.4

Safari auf Mac

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

Wie Sie Mac erscheint in navigator.vendor beider Szenarien sehen können.

Hier ist meine Version

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

So können Sie diese Safari

4

Gebäude :) auf Mac Ziel verwenden off von @ Tim Abell-Lösung, können Sie einen ähnlichen Ansatz verwenden Klassen für alle zu erhalten der wichtigsten Plattformen und Browser für eine breitere Erkennung und Flexibilität.

Dieses Snippet fügt eine Klasse für den Browsernamen und eine weitere für den Plattformnamen zum Element <html> hinzu. So würde zum Beispiel Safari auf Mac am Ende <html class="safari mac"> sein.

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 

Mit diesem Ansatz können Sie Dinge wie:

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 */ } 
Verwandte Themen