Mottie虛擬鍵盤與引導主題

Question

我使用Mottie virtual keyboard本angular wrapper周圍，我想用一個自舉主題爲我的鍵盤和我說像這樣

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，在瀏覽器窗口被調整大小時，所有的鍵盤都被調整大小，但是我根本沒有這種行爲，我在這裏錯過了什麼嗎？如何調整我的瀏覽器窗口（使用bootstrap主題）時調整鍵盤大小？

換句話說，我怎樣才能讓this鍵盤調整窗口大小？

Answer 1

鍵盤沒有專門爲Bootstrap設置的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; } 
}