使用 Bootstrap 为设备类型进行响应式设计答案

【问题标题】：Make responsive design for device type with Bootstrap使用 Bootstrap 为设备类型进行响应式设计
【发布时间】：2014-11-21 10:41:09
【问题描述】：

我有一个网站，可以在该网站上上传带有激活码和input 的文件以手动插入。在智能手机和平板电脑上，fileupload 应该是不可能的。我试试看

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

        <title />

        <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <!-- Some content for the page -->

        <div class="hidden-xs hidden-sm">
            <span>Upload file</span>

            <input type="file" />
            <input type="button" value="Upload" />
        </div>

        <div>
            <span>Insert key</span>

            <input type="text" />
        </div>

        <!-- More content for the page -->
    </body>
</html>

这适用于智能手机、纵向模式的平板电脑和桌面。在横向模式的平板电脑上，上传是可见的。分辨率似乎适用于“中等”（即桌面），因此显示出来了。

如果设备是智能手机、平板电脑或台式机，是否可以获得信息并为每个设备定义行为？

提前致谢。

【问题讨论】：

为什么不使用@media 查询并设置宽度，这样它就不会显示屏幕尺寸是否大于提供的宽度
您可以尝试使用 Modernizr 来检查设备是否为触控设备。
您是否使用了非 Bootstrap 提供的媒体查询？不清楚你用 CSS 尝试了什么。

标签： css html twitter-bootstrap responsive-design

【解决方案1】：

您必须为此确定用户代理，而仅使用 CSS 是不可能的。您可以使用 Javascript 来添加某个 body 类，或者在服务器端添加一些东西。

detectmobilebrowser.com 上有很多脚本，例如，您可以对其进行修改以区分智能手机和平板电脑。

【讨论】：