在虚拟键盘上强制实施密钥大小

Question

这是我想要实现的布局：https://jsfiddle.net/h0oa3Lps/所有键的大小都相同。

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

    $('.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();

使用css / keyboard.min.css时，左箭头，右箭头和退格键略大于其他键。文本定位也关闭了。图片：

如果切换到css / keyboard-basic.min.css，箭头键与常规键的大小相同，但esc，backspace和accept键的大小是常规键的两倍。这也占据了屏幕的一半（因为它没有使用jquery-ui定位）。图像：

如何强制统一密钥大小？

如果它有所不同我使用Node，Express和Foundation v5.5.3加上我刚刚更新到最新版本的jQuery，jQuery-ui和jQuery.keyboard。

Answer 1

要解决此问题，我将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; 
}

然后我混合了键盘按钮的样式。这给出了正确的样式，如jsfiddle演示中所示（但是大小不一）。

.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;
}