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
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.
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.
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?
ja, ich habe Safari für Sieg, hat Designer-Safari für mac – Moak
@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. –
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
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`
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Add your Safari-specific styles here. */
}
Das zielt * sowohl * Safari und Chrome, die nicht die Voraussetzung ist. – philw
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>
verwenden in CSS. Es wird nur in Safari gerendert
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
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 */ }
- 1. Unterschiede zwischen Safari für Windows und Safari für Mac
- 2. CSS nur für Safari anwenden?
- 3. Wie kann ich Ansichten ausrichten in LinearLayout ausrichten?
- 4. Wie kann ich in Safari 3 und Safari 4 testen?
- 5. Safari auf MAC Überspringen Eingabefelder
- 6. Wie kann ich meine Etiketten korrekt ausrichten?
- 7. Safari Mac OSX Backspace-Probleme
- 8. Wie ich meinen Inhalt ausrichten kann
- 9. Wie kann ich zwei divs horizontal ausrichten?
- 10. Wie Radio-Tasten auf einer Iphone-Safari ausrichten
- 11. Wie entwickle ich ein Addon für Safari?
- 12. Validierung der Viewstatus-MAC in Safari fehlgeschlagen
- 13. Safari von einer Mac-Anwendung starten
- 14. Font Gewicht wird heller auf Mac/Safari
- 15. Wie kann ich erkennen, ob docker für Mac installiert ist?
- 16. Wie kann ich IE10 auf Mac testen?
- 17. Wie kann ich Chrome nur für mobile Geräte erkennen?
- 18. Preset Safari Lesezeichen und Homepage Mac
- 19. :: vor css funktioniert nicht auf Mac-Safari
- 20. Wie bekomme ich zipalign für Mac?
- 21. Web-Arbeiter feuert Ausnahme auf Mac-Safari
- 22. Wie kann ich mod_wsgi auf Mac arbeiten?
- 23. Wie kann ich ein Div unter einem anderen ausrichten?
- 24. Ich kann CSS-Tabellen nicht vertikal ausrichten
- 25. Nur CR-Dateien finden (nur Mac)
- 26. Wie kann ich Latexgleichungen in R Markdown ausrichten?
- 27. Wie kann ich Bildlaufleisten in Mobile Safari anzeigen lassen?
- 28. Wie soll ich Javascript Bugs reproduzieren, wenn ich keinen Mac & Safari habe?
- 29. Wie kann ich zwei schwebende Divs vertikal ausrichten?
- 30. Wie kann ich JMenuItem Ausrichtung auf rechts ausrichten
Hat jemand dies in letzter Zeit zur Arbeit gebracht? Ich kann nicht scheinen. – miles
@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
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'. –