Изменить размер Текстовое поле на основе типа браузера

Question

У меня есть текстовое поле в моей форме, что я хочу изменить его ширину в зависимости от типа браузера, который я использую, например, firefox.I получил код JQuery, который определяет, какой браузер я используя m и 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  
} 

Answer 1

Вы можете добавить классов в тело тега на основе браузера и стиль на их основе. Например:

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