हाय मैंने सफारी समेत सभी सोचने योग्य पीसी ब्राउज़र पर एक साइट तय की है। अब मेरे स्मार्ट गधे डिजाइनर ने मुझे मैक पर पूरे लेआउट के एक स्क्रीन शॉट भेजा। मुझे पता है कि इसे कैसे हल किया जाए (कुछ पिक्स द्वारा तत्व पर मार्जिन को कम करें), लेकिन मुझे नहीं पता कि केवल सफारी को कैसे लक्षित किया जाए, अधिमानतः सफारी मैक।
ऐसा करने का सबसे अच्छा तरीका क्या है?केवल मैक के लिए सफारी को कैसे लक्षित करें?
यहाँ एक स्क्रिप्ट आप अपने पृष्ठ (या एक अलग js फ़ाइल में) ताकि आप अपने सीएसएस फ़ाइल के लिए सफारी-मैक विशिष्ट सीएसएस जोड़ सकते हैं कि एचटीएमएल तत्व के लिए एक वर्ग जोड़ देगा पर शामिल कर सकते हैं।
(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);
उदाहरण सीएसएस फिक्स, जो पेज या अपनी बाहरी सीएसएस फ़ाइल आदि में किया जा सकता है:
/* 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; }
विचारों के लिए अन्य उत्तर के लिए धन्यवाद, मैं एक पूर्ण समाधान में सब कुछ लपेट के लिए कोशिश की है इस जवाब में।
उपयोगकर्ता एजेंट स्ट्रिंग में ऑपरेटिंग सिस्टम जानकारी होती है, और आप शायद ब्राउज़र प्रकार के लिए उपयोगकर्ता एजेंट स्ट्रिंग की जांच कर रहे हैं।
एक मैक ब्राउज़र में "मैक ओएस एक्स 10" स्ट्रिंग होगी। उपयोगकर्ता एजेंट स्ट्रिंग में।
आपको शायद उपयोगकर्ता-एजेंट के खिलाफ एक रेगेक्स क्वेरी चलाने की आवश्यकता है और मैक के लिए सफारी के लिए चुनिंदा सीएसएस फ़ाइल लोड करने की आवश्यकता है।
इसके अलावा: क्या आप सुनिश्चित हैं कि खिड़कियों के लिए मैक और सफारी के लिए सफारी एक ही पृष्ठ को समान रूप से अलग करता है?
हाँ, मैं जीत के लिए सफारी है, डिजाइनर सफारी है मैक – Moak
@ मोआक - नहीं, मेरा मतलब था, क्या उनके पास अनिवार्य रूप से एक ही इंजन नहीं है। मैं कल्पना नहीं कर सकता कि पृष्ठ 'अलग हो जाता है' शायद फोंट थोड़ा दूर हो। –
उन्होंने कहा कि यह "कुछ पीएक्स" से बंद है। मैं मानता हूं कि यह कैसे एक फोंट प्रदान किया जाता है से संबंधित एक मुद्दा हो सकता है। केवल अनुमान है। – Rob
खुशी मुझे यह पृष्ठ मिला, मुझे लगता है कि जब भी आप इन मैक/पीसी मुद्दों में चलने वाले फ़ॉन्ट आधारित नेविगेशन या टैब के साथ पैडिंग का उपयोग करते हैं तो मुझे दर्द होता है क्योंकि वे अलग-अलग फ़ॉन्ट प्रस्तुत करते हैं।
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. */
}
लक्ष्य * दोनों * सफारी और क्रोम, जो आवश्यकता नहीं है। – philw
विभिन्न ब्राउज़रों के लिए गतिशील शैलियों प्रदान करने का एक उदाहरण: सीएसएस में
<?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>
उपयोग इस। इसे केवल सफारी
/*\*/
.some-class {
/* Here comes some options */
}
/**/
मुझे लगता है कि चयनित सही उत्तर पुराना है और अब काम नहीं करता है।
यहाँ आईपैड पर navigator.vendor
सफारी का आउटपुट है
Mozilla/5.0 (iPad, सीपीयू ओएस 8_3 मैक ओएस एक्स) की तरह AppleWebKit/600.1.4 (KHTML, छिपकली की तरह) संस्करण/8.0 मोबाइल/12 एफ 6 9 सफारी/600.1।4
मैक पर सफारी
मोज़िला/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.2.5 (KHTML, छिपकली की तरह) संस्करण/8.0.2 सफारी/600.2 .5 सफारी/600.1.4
आप देख सकते हैं Mac दोनों परिदृश्यों की navigator.vendor में दिखाई देता है।
यहाँ
var isSafariMac = /Safari/.test(navigator.userAgent) &&
!/Mobile/.test(navigator.userAgent) &&
/Apple Computer/.test(navigator.vendor);
तो आप इस का उपयोग कर सकते @Tim एबेल के समाधान के बंद मैक :)
बिल्डिंग पर सफारी लक्षित करने के लिए, आप सभी के लिए कक्षाओं पाने के लिए एक समान दृष्टिकोण का उपयोग कर सकते मेरी संस्करण है व्यापक पहचान और लचीलापन के लिए प्रमुख प्लेटफार्मों और ब्राउज़रों में से।
यह स्निपेट <html> तत्व को मंच नाम के लिए ब्राउज़र नाम और किसी अन्य के लिए एक वर्ग जोड़ देगा। तो, उदाहरण के लिए, मैक पर सफारी <html class="safari mac"> होने का अंत हो जाएगा।
जावास्क्रिप्ट/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
इस दृष्टिकोण के साथ, आप की तरह कर सकते हैं:
सीएसएस
.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 */ }
क्या किसी ने हाल ही में काम करने के लिए इसे प्राप्त किया है? मुझे प्रतीत नहीं होता है। – miles
@ टिम अबेल - आपके समाधान के लिए धन्यवाद! मैंने इसे थोड़ा अधिक कार्यक्षमता के साथ आवश्यक चीज़ों के लिए प्रेरणा के रूप में उपयोग किया। (http://stackoverflow.com/a/30540862/114558) तो, मुझे सही दिशा में शुरू करने के लिए धन्यवाद! :) – rinogo
धन्यवाद। यह अच्छी तरह से काम किया। FYI करें, यह विंडोज के साथ ही मैक पर सफारी पर काम करने के लिए, बस शर्त हटाने प्राप्त करने के लिए देख डेवलपर्स के लिए: 'navigator.userAgent.indexOf ('मैक') = -1'!। –