引导移动应用程序按钮大小

我想打一个用户接口，用于与HTML5 /引导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来制作适当尺寸的元素？

来源

2014-02-12 Roel van Uden

你能后的截图？下面的答案是很好的，但是，如果你想增加按钮大小**只是**移动，那么你需要添加一个类到'.btn'并在媒体查询中写入一些CSS来定位宽度（s）你想要的。 – dward

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

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

这是一个问题，因为使用CSS设备适配是必要的越来越敏感部位在捕捉模式工作在IE10地铁。所以虽然CSS设备适配修复了我们在快照模式下的问题，但它会在Windows Phone 8设备（如Lumia）上导致问题。

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

设备宽度没有被应用，因此搞砸了整个设备显示...

来源

2014-02-12 20:01:12

尝试添加一个类到您的按钮。它应该看起来像：<button class="btn btn-primary btn-lg">Create<button>而不是<a class="btn btn-primary form-control">Create</a>

希望这有助于。

来源

2014-02-12 19:51:49 zach57

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

所以使用：

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

要使用更大的尺寸。

您还可以使用信息here覆盖每个屏幕大小上显示的内容。因此，您可以像普通屏幕一样使用常规大小的按钮，并为移动设备设置不同的大小。您将网页上的内容重复两次，但将其包含适当的响应标签以获得所需内容。

来源

2014-02-12 19:53:04

引导移动应用程序按钮大小

回答

相关问题