Größe ändern Textbox basierend auf dem Typ des Browsers

Question

Ich habe eine Textbox in meinem Formular, dass ich die Größe der Breite abhängig von der Art des Browsers, den ich zum Beispiel firefox bin ändern möchte. Ich habe einen JQuery-Code, der welchen Browser I erkennt benutze, und CSS, um die Breite des Textfelds zu reduzieren, aber wie kann ich dies zusammen verwenden, um zu tun, was ich will, oder gibt es eine einfachere Möglichkeit, die Textbox je nach Browser zu skalieren?

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

Sie Klassen, um Ihren Körper-Tag hinzufügen können auf dem Browser-basiert und Stil auf ihnen basieren. Zum Beispiel:

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