javascript - 带有 Bootstrap 主题的 Mottie 虚拟键盘

Question

我正在使用 Mottie virtual keyboard有了这个angular wrapper在它周围，我想为我的键盘使用一个 Bootstrap 主题，我这样添加了它

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