Question

我正在开发一个UI，当在移动设备上显示时，它太小而无法正常使用。

我将div的大小固定为像素，如果调整窗口大小，它会保持大小，但是当我在chrome或实际移动设备上的移动模式下测试时，它会缩小。我怎么能阻止它表现得那么？

Answer 1

听起来您的网页已缩小，因为它不包含head中的这一行代码：

<meta name="viewport" content="width=device-width"; initial-scale="1.0" />

Answer 2

如果无法看到您的代码，很难为您提供正确的细节。也就是说，有两个常见的起点，这些是：

此元标记允许移动浏览器在虚拟“窗口”（视口）中渲染页面，通常比屏幕更宽，因此无需将每个页面布局挤压到一个小窗口中。
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
CSS media queries可让您灵活地更改网页在不同屏幕尺寸下的显示方式。

Answer 3

在css中，将div的min-width设置为所需的宽度，以及视口元素。像这样：

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
           div#mydiv{
              min-width: <== put here the width that you want;
           }
        </style>
    </head>
    <body>
         <div id="mydiv"></div>
    </body>
</html>

在移动设备

3 个答案: