Question

我想做的是根据浏览器版本和大小创建三个不同的设计模板我不想使用所有响应式设计原则，因此如果用户减小浏览器的大小，它将修改并应用新设计

任何资源和链接都会很棒，我发现了很多例子而不是教程的问题

Answer 1

尝试以下代码，

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

Answer 2

您可以使用headJS。它还可以加载Javascript并具有更多功能。但是在<html>标记中会出现类似的内容：

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"

显示宽度浏览器和css选项。宽度会自动更新，因此您可以轻松创建CSS而无需使用任何其他Javascript

Answer 3

使用此：

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

Answer 4

这里是如何检测浏览器...： 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/ 对于第二个问题： 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/

享受：）

检测jQuery中的浏览器类型和版本以使用响应式设计

4 个答案: