CODEWITHSUNDEEP
jquerycss
Reana Botros
Reana Botros

Reputation: 17

Detect browser type and version in jQuery to work with responsive design

what i wanna do is to create three different design templates according to the browser version and size i do not want to use all the responsive design principles so if the user decrease the size of the browser it will modify and apply the new design .

any resource's and links will be great ,the problem that i found a lot of examples but not a tutorial for that

Upvotes: 0

Views: 592

Answers (4)

run
run

Reputation: 1186

Use this:

$(document) .ready( function() {
    alert("broser name:"+navigator.appName);
    alert("broser version:"+navigator.appVersion);
});

Upvotes: 0

Chamika Sandamal
Chamika Sandamal

Reputation: 24312

try following code,

var browser = '';
var browserVersion = 0;

if (/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
    browser = 'Opera';
} else if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
    browser = 'MSIE';
} else if (/Navigator[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
    browser = 'Netscape';
} else if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
    browser = 'Chrome';
} else if (/Safari[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
    browser = 'Safari';
    /Version[\/\s](\d+\.\d+)/.test(navigator.userAgent);
    browserVersion = new Number(RegExp.$1);
} else if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
    browser = 'Firefox';
}
if(browserVersion === 0){
    browserVersion = parseFloat(new Number(RegExp.$1));
}
alert(browser + "*" + browserVersion);

Upvotes: 1

Eslam Soliman
Eslam Soliman

Reputation: 1296

here is how to detect browser an ...: http://www.tvidesign.co.uk/blog/CSS-Browser-detection-using-jQuery-instead-of-hacks.aspx http://www.ilovecolors.com.ar/detect-screen-size-css-style/ and for the second issue : http://www.greengoatmedia.com/blog/10-new-responsive-design-web-design-examples.html http://getskeleton.com/ http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/ http://designmodo.com/responsive-design-examples/

Enjoy :)

Upvotes: 0

Niels
Niels

Reputation: 49929

You can use headJS for this. It can also load Javascript and has many more functions. But in your <html> tag will get something like:

class="mozilla w-1500 lt-1680 lt-1920 root-section js  gradient rgba opacity textshadow multiplebgs boxshadow borderimage borderradius no-cssreflections csstransforms csstransitions no-fontface domloaded"

Where the width browser and css options are shown. The width is automaticly updated so you can easily create your CSS without using any other Javascript

Upvotes: 0

Related Questions