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, во всех из них клавиатура меняет размер при изменении размеров браузера, но у меня вообще нет такого поведения, я что-то здесь не вижу? как я могу сделать свою клавиатуру для изменения размера, когда я изменяю размер окна браузера (с помощью темы начальной загрузки)?

Или, другими словами, как я могу сделать this клавиатуру, чтобы изменить размер окна?

Answer 1

На клавиатуре нет файла css, специально настроенного для Bootstrap, поэтому для изменения размера клавиатуры необходимы следующие мультимедийные запросы (также см. Раздел 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; } 
}