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>

---

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

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

jQuery（函数（$）
{                        
if（变色）{
$（'body'）.addClass（'browser-chrome'）；
}else if（iFirefox）{
$（'body'）.addClass（'browser-firefox'）；
}               
});    
.browser chrome#DOB{
宽度：100%；
}
.browser firefox#DOB{
宽度：80%；
}

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