Question

我的表单中有一个文本框，我想调整其宽度，具体取决于我使用的浏览器类型，例如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    
}

Answer 1

您可以根据浏览器向您的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>

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

1 个答案: