gpt4 book ai didi

html - 如何在移动设备上强制缩小或最小宽度?

转载 作者:太空狗 更新时间:2023-10-29 14:20:48 25 4
gpt4 key购买 nike

我有一个基于 Bootstrap 2.3 构建的响应式网站。但是我需要缩小一页以适应不能响应工作的元素。如果我双击,它会完美缩小。但是我想这样默认。

skitch

html:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container-fluid" style="min-width:1024px">
<div class="row-fluid">
<div class="span12">
<!-- arbitrary content. point is: zoom out by default, don't crop img -->
<img src="1024x768.png">
</div>
</div>
<div class="row-fluid">
<div class="span12">
<!--
if min-width is observed, these should be side by side
instead of wrapped like responsive normally does
-->
<img src="300x768.png"><img src="300x768.png"><img src="300x768.png">
</div>
</div>
</div>
</body>

注意:我并不是要禁用缩放。我只想默认缩小。

我已经尝试了以下但没有成功:

1. <meta name="viewport" content="width=1024">

2. <meta name="viewport" content="user-scalable=yes">

3. body { float:left; min-width:1024px; }

4. min-width on all wrapped objects

更新

呃。我正在使用 Google Chrome 移动仿真进行调试。实际的移动设备在 html,body {min-width:1024px;} 下运行良好。我也加入了一些内容以取消响应。

专业提示:不要依赖 Google Chrome 移动仿真。

最佳答案

使用元标记来做到这一点

<meta name="viewport" content="width=device-width, initial-scale=1">

initial-scale --- 访问页面时的初始缩放比例。 1.0 不缩放。

minimum-scale --- 访问者可以在页面上缩放的最小量。 1.0 不缩放。

maximum-scale --- 访问者可以在页面上缩放的最大量。 1.0 不缩放。

user-scalable ---- 允许设备放大和缩小。值为是或否。

Source

关于html - 如何在移动设备上强制缩小或最小宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25821210/

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