首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >根据浏览器类型调整文本框的大小

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

Stack Overflow用户
提问于 2016-12-20 17:16:26
回答 1查看 41关注 0票数 2

我的表单中有一个文本框,我想根据我使用的浏览器的类型(例如firefox.I )来调整它的宽度。我有一个JQuery代码来检测我使用的浏览器,以及CSS来缩小文本框的宽度,但是我如何使用它来做我想做的事情,或者是否有一种根据浏览器调整文本框大小的更简单的方法?

JQuery

代码语言:javascript
运行
复制
<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

代码语言:javascript
运行
复制
#DOB
{
width:100%;
max-width: 172px    
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-12-20 17:21:43

您可以根据浏览器向您的body标记添加类,并根据它们添加样式。例如:

代码语言:javascript
运行
复制
<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>
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41247855

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档