Question

我想用HTML5 / Bootstrap 3为移动应用程序创建一个用户界面。我有这个：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Task Service</title>
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <link rel="stylesheet" href="css/bootstrap-3.1.0.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme-3.1.0.min.css">
    </head>
    <body>
        <div class="container">
            <div class="header">
                <h3 class="text-muted">Angular/Bootstrap Tasks</h3>
            </div>
            <a class="btn btn-primary form-control">
                Create
            </a>
        </div>
        <script src="lib/bootstrap-3.1.0.min.js" type="text/javascript"></script>
    </body>
</html>

我的Windows Phone 8上的按钮非常小。它大约是我手指大小的1/4。

如何使用bootstrap 3继续制作合适的尺寸元素？

Answer 1

呃，这是微软无能的经典案例。

参考：http://timkadlec.com/2013/01/windows-phone-8-and-device-width/

这是一个问题，因为使用CSS设备适配是必要的   让响应式网站在IE10 for Metro中以快照模式工作。所以   而CSS设备适应修复了我们的捕捉模式问题，它导致   Windows Phone 8设备上的问题，如Lumia。

我的建议是使用微软的修复程序。客户端UA嗅探   可能不是最有说服力的解决方案，但我更喜欢它   损害用户体验 - 其他两个中的每一个   解决方案将是有罪的。也许这会有所不同   场景，如果这是IE8或IE7，但考虑到它的行为   刚出来的操作系统（因此，最有可能   只会暂时增加市场份额）我认为是这样   值得实施。

未应用设备宽度，因此拧紧了整个设备显示屏......

Answer 2

尝试在按钮中添加一个类。它应该是：<button class="btn btn-primary btn-lg">Create<button>而不是<a class="btn btn-primary form-control">Create</a>

希望这有帮助。

Answer 3

您可以通过添加btn-lg，btn-sm或btn-xs来覆盖默认按钮大小，这样它就是您希望的大小。

所以使用：

<a class="btn btn-primary btn-lg form-control">
   Create
</a>

使用更大的尺寸。

您还可以使用信息here覆盖每种屏幕尺寸上显示的内容。因此，您可以像常规屏幕一样使用常规尺寸按钮，并为移动设备使用不同尺寸。你在页面上有你的内容两次，但用适当的响应标签包装它以得到你想要的东西。

Bootstrap移动应用程序按钮大小

3 个答案: