Mottie仮想キーボードは、私はそれの周りにこの<a href="https://github.com/antonio-spinelli/ng-virtual-keyboard" rel="nofollow">angular wrapper</a>で<a href="https://github.com/Mottie/Keyboard" rel="nofollow">Mottie virtual keyboard</a>を使用しています

Question

は、私は私のキーボードのためのブートストラップのテーマを使用したいと私はあなたがの実際の例を見つけることができます。この

VKI_CONFIG.css = { 
       // input & preview 
       input: 'form-control input-sm', 
       // keyboard container 
       container: 'center-block dropdown-menu', // jumbotron 
       // default state 
       buttonDefault: 'btn btn-default', 
       // hovered button 
       buttonHover: 'btn-primary', 
       // Action keys (e.g. Accept, Cancel, Tab, etc); 
       // this replaces "actionClass" option 
       buttonAction: 'active', 
       // used when disabling the decimal button {dec} 
       // when a decimal exists in the input area 
       buttonDisabled: 'disabled' 
      }; 

Hereのようにこれを追加しましたそれはhereとhereのようなこのキーボードの使い方のデモとオンラインの例を閲覧しているので、ブラウザウィンドウのサイズを変更するとキーボードのサイズが変更されますが、その動作はまったくありません。ブラウザウィンドウ（ブートストラップテーマ付き）のサイズを変更すると、キーボードのサイズを変更するにはどうすればよいですか？

つまり、thisキーボードのサイズをウィンドウのサイズ変更するにはどうすればよいですか？

Answer 1

キーボードには、ブートストラップ用に特別に設定されたCSSファイルがないため、キーボードのサイズを変更するには次のメディアクエリが必要です（FAQも参照）。

私は、これらの設定はどのように正確に知っているが、フォント・サイズを調整すること自由に感じなさいません - demo

/* Media Queries */ 
/* 240 x 320 (small phone) */ 
@media all and (max-width: 319px) { 
    .ui-keyboard .ui-keyboard-button { font-size: 9px; } 
    .ui-keyboard .ui-keyboard-input { font-size: 12px; } 
} 

/* 320 x 480 (iPhone) */ 
@media all and (min-width: 320px) and (max-width: 479px) { 
    .ui-keyboard .ui-keyboard-button { font-size: 9px; } 
    .ui-keyboard .ui-keyboard-input { font-size: 14px; } 
} 

/* 480 x 640 (small tablet) */ 
@media all and (min-width: 480px) and (max-width: 767px) { 
    .ui-keyboard .ui-keyboard-button { font-size: 13px; } 
    .ui-keyboard .ui-keyboard-input { font-size: 14px; } 
}