仮想キーボードでキーサイズを適用する

Question

これは私が達成しようとしているレイアウトです：https://jsfiddle.net/h0oa3Lps/すべてのキーは同じサイズです。

私のアプリケーションでは、私はこのコードを持っています。 JSは私のヒスイのファイルの一番下にある：CSS/keyboard.min.cssを使用する場合

$('.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-basic.min.cssに切り替えると、矢印キーは通常のキーと同じサイズですが、esc、backspace、およびacceptキーは通常のキーの2倍のサイズです。また、これは画面の半分を占めます（jquery-uiの配置を使用していないため）。画像：私は均一なキーサイズを強制するにはどうすればよい

？

私はNode、Express、Foundation v5.5.3を使用していますが、私はちょうどjQuery、jQuery-ui、jQuery.keyboardの最新バージョンに更新しました。

Answer 1

この問題を解決するには、keyboard.cssの無効化されたCSSをkeyboard-butchered.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; 
} 

：私は、部分的に私の質問に答え、次のを思い付いた最終的keyboard-basic.cssでスタイルの実験を開始したと。これは、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; 
}