gpt4 book ai didi

css - 使用 Bootstrap 针对设备类型进行响应式设计

转载 作者:行者123 更新时间:2023-11-28 08:58:01 26 4
gpt4 key购买 nike

我有一个网站,可以在该网站上上传一个带有激活码的文件和一个 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>

这在智能手机、纵向模式的平板电脑和台式机上运行良好。在横向模式的平板电脑上,上传是可见的。该分辨率似乎适用于“中”(即桌面),因此显示。

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

提前致谢。

最佳答案

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

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

关于css - 使用 Bootstrap 针对设备类型进行响应式设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27059395/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com