Css 通过引导为设备类型进行响应性设计_Css_Html_Twitter Bootstrap_Responsive Design

Css 通过引导为设备类型进行响应性设计

css html twitter-bootstrap responsive-design

Css 通过引导为设备类型进行响应性设计,css,html,twitter-bootstrap,responsive-design,Css,Html,Twitter Bootstrap,Responsive Design,我有一个网站，它可以上传一个带有激活码和输入的文件，然后手动插入。在智能手机和平板电脑上，文件上传应该是不可能的。我想试一下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> &

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

<!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>

这在智能手机、纵向模式的平板电脑和桌面上都能很好地工作。在横向模式的平板电脑上，上传是可见的。该决议似乎是为媒体meens桌面，所以它显示

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

提前感谢。

您必须为此确定用户代理，这仅用CSS是不可能的。您可以使用Javascript添加特定的主体类或服务器端的某些内容

上面有很多脚本，你可以修改它们来区分智能手机和平板电脑，例如。

为什么不使用@media query并设置宽度，这样屏幕就不会显示屏幕大小是否大于提供的宽度？您可以尝试使用Modernizer来检查设备是否为触摸设备。您使用的媒体查询是否与引导提供的媒体查询不同？不清楚你用CSS做了什么尝试。