Javascript 强制虚拟键盘上的键大小

这就是我试图实现的布局：所有键的大小都相同

在我的应用程序中，我有这个代码。js位于我的jade文件的底部：

    $('.keyboard')
        .keyboard({
            layout: 'custom',
            customLayout: {
                'default' : [
                    '1 2 3 {c}',
                    '4 5 6 {b}',
                    '7 8 9 {dec}',
                    '{left} {right} 0 {a}'
                ]
            },
            maxLength : 6,
            restrictInput : true,
            useCombos : false,
            acceptValid : true,
            validate : function(keyboard, value, isClosing){
                // only make valid if input is between 0 and 100 inclusive
                return value >= 0.0 && value <= 100.0;
            }
        })
        .addTyping();

$（“.keyboard”）
.键盘({
布局：“自定义”，
自定义布局：{
“默认值”：[
“1 2 3{c}”，
'456{b}'，
“789{dec}”，
“{left}{right}0{a}”
]
},
最大长度：6，
restrictInput:true，
useCombos:false，
对,，
验证：功能（键盘、值、IsClose）{
//仅当输入介于0和100之间（含0和100）时才使其有效
return value>=0.0&&value为了解决这个问题，我将
keyboard.css
的未统一css复制到了
keyboard butchered.css
。然后我开始尝试
keyboard basic.css
中的样式，并最终得出以下部分回答了我的问题：

.ui-keyboard {
    /* adjust overall keyboard size using "font-size" */
    font-size: 28px; /* increase button size for small screen */
    text-align: center;
    background: #fefefe;
    border: 1px solid #aaa;
    padding: 4px;

    /* include the following setting to place the
    keyboard at the bottom of the browser window */
    left: 0px;
    top: auto;
    /*position: fixed;*/
    position: absolute;
    white-space: nowrap;
    overflow-x: auto;
    /* see issue #484 */
    -ms-touch-action: manipulation;
    touch-action: manipulation; 
}

然后，我混合了键盘按钮的样式，这提供了正确的样式，正如在JSFIDLE演示中看到的那样（但是是巨型的）

当我在fiddle中测试代码时，它会按预期工作。我不知道这是否是CSS问题。还更新了jQuery 3.2.1和UI 1.12.1，以确保其工作正常：我怀疑这可能取决于媒体选择器。
.ui-keyboard-button {
    border: 1px solid #aaa;
    padding: 0 0.5em;
    margin: 1px;
    min-width: 3em;
    height: 3em;
    line-height: 3em;
    vertical-align: top;
    font-family: Helvetica, Arial, sans-serif;
    color: #333;
    text-align: center;
    border-radius: 5px;
    -webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
    background: white;
    background-image: -webkit-linear-gradient(-90deg, white 0%, #e3e3e3 100%);
    background-image:         linear-gradient(-90deg, white 0%, #e3e3e3 100%);
    cursor: pointer;
    overflow: hidden;
    -moz-user-focus: ignore;
}