6

I researched on identifying, if the browser is Safari or not. In javascript : window.devicePixelRatio object gives '1' for both chrome and safari In CSS :

@media screen and (-webkit-min-device-pixel-ratio:0){
    #yourdiv{
        margin-left:0;

    }
} 

It works for both chrome and safari. But I didn't find css or javascript hack for safari browser only (shouldn't work for any other browser). Can any body help me out.

I am using the safari brower: navigator.useragent = Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16

0

4 Answers 4

8
if (navigator.userAgent.match(/AppleWebKit/) && ! navigator.userAgent.match(/Chrome/)) {
   alert('this is safari brower and only safari brower')
}
Sign up to request clarification or add additional context in comments.

Comments

7

CSS hacks are frowned upon, though less frowned upon when targeting older versions of IE (a necessary evil).

You could figure out if using Safari like this...

JavaScript

if (navigator.userAgent.match(/OS X.*Safari/) && ! navigator.userAgent.match(/Chrome/)) {
   document.body.className += 'safari';
}

...and then use modify your selectors for Safari like so...

CSS

.safari #yourdiv {
    margin-left: 0;
}

jsFiddle.

6 Comments

@alex The previous one worked, but for both safari and chrome browser.And /OS X.*Safari/ didn't worked out
@Prakash See updated, it now only matches Safari (not Chrome).
I looked at jsfiddle's link that u've given, it's not working.. the background is red
@Prakash What version of Safari are you using? It worked in my 5.0.3. Also, can you post your navigator.userAgent ?
I've posted on my question navigator.useragent
|
2

There's a javascript function that helps identify most browsers here.

Its worth keeping up to date on, as it is updating regularly.

By way of explanation the following is copied from the linked page:


Browser detection

The dataBrowser array is filled with objects that contain the properties that help the script detect your users' browser. Note its general syntax:

dataBrowser: [
    {
        prop: window.opera,
        identity: "Opera",
        versionSearch: "Version" // note: no comma
    },
    {
        string: navigator.userAgent,
        subString: "MSIE",
        identity: "Explorer",
        versionSearch: "MSIE" // note: no comma
    } // note: no comma
];

The [] define an array literal, and all of its elements are object literals. Each object literal is enclosed in curly braces {} and contains a few properties (name: value,). Note that a comma between the objects and between the properties is required, but that the last comma is always forbidden.

Properties

Every object in the dataBrowser array can contain the following properties:

string and subString properties. These say: "search for subString in string". If the subString is found, the browser is identified. a prop property. It says "see if prop is supported". If it is, the browser is identified. an identity string. This string becomes the value of BrowserDetect.browser. a versionSearch string. This is for searching for the version number (see below). If this property is absent, the identity string is used instead. Every object must contain either 1 or 2 (never both!), must contain 3 and may contain 4.

1 Comment

Yes that worked, but I don't want to put all those long javascript codes on my project. anyway I find out one line solution. Thanks for help with my +1 vote.
0

I know this question is a bit old but all the answers provided will detect both desktop and mobile Safari. To detect only one or the other, you can use this:

var inDesktopSafari = (navigator.userAgent.toLowerCase().indexOf('safari') !== -1 && navigator.userAgent.toLowerCase().indexOf('chrome') === -1) && typeof window.ontouchstart === 'undefined';

var inMobileSafari = (navigator.userAgent.toLowerCase().indexOf('safari') !== -1 && navigator.userAgent.toLowerCase().indexOf('chrome') === -1) && typeof window.ontouchstart !== 'undefined';

1 Comment

So long as Apple don't come out with a touch-enabled desktop device.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.