javascript - 根据浏览器类型调整文本框大小

我的表单中有一个文本框，我想根据我使用的浏览器类型来调整它的宽度，例如firefox，我有一个JQuery代码来检测我使用的浏览器，还有CSS来缩小文本框的宽度，但是，我怎样才能一起使用它来做我想做的事情呢？或者根据浏览器的不同，有没有一种更简单的方法来调整文本框的大小呢？
JQuery公司

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]"
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0 || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;

jQuery(function($)
{
    if(isChrome) {
        console.log("Using Chrome");
    }

    else if(isFirefox) {
        //$("#DOB").mask("99/99/9999",{placeholder:" "});
        console.log("Using FireFox");
    }
});
</script>

CSS

#DOB
{
width:100%;
max-width: 172px
}

最佳答案

可以基于浏览器将类添加到body标记中，并基于它们添加样式。例如：

<script>
jQuery(function($)
{
    if (isChrome) {
        $('body').addClass('browser-chrome');
    } else if(isFirefox) {
        $('body').addClass('browser-firefox');
    }
});
</script>

<style>
.browser-chrome #DOB {
    width: 100%;
}

.browser-firefox #DOB {
    width: 80%;
}
</style>

关于javascript - 根据浏览器类型调整文本框大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41247855/