如何使表单适配移动设备？

Question

我有一些简单的表单，在浏览器中看起来很不错：

但是当我从移动设备加载此页面时，表单看起来非常小：

最好的方法是什么，可以使该表单在完整的移动屏幕上看起来漂亮？我应该使用CSS还是Bootstrap？是否有一些通用的方法来解决这个问题？

- Claude

---

添加一个元视口标签。 - mehulmpt

你的问题主要基于个人观点，这在SO上是不合适的话题。请添加一些代码使其相关。 - neophyte

@ZimSystem 这段代码很简单，我所需要的只是一个meta“viewport”标签。 - Claude

@neophyte 不不，我的问题有一个具体的答案，只需要使用一个元标签即可。 - Claude

代码与识别问题为重复有关。 - Carol Skelly

Answer 1

为了让表单适应手机屏幕，请添加一个metaviewport标签。 Viewport是网页上用户可见的区域。 Viewport因设备而异，在移动电话上比计算机屏幕小。

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

有关视口的更多详细信息

- Yousaf

Answer 2

将此元标签添加到页面头部：

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

你还可以使用Bootstrap网格布局。

- LIJIN SAMUEL

---

非常感谢！它有效了！顺便问一下，你说的bootstrap网格布局是什么意思？你能给我发个链接吗？ - Claude

请访问以下链接： https://v4-alpha.getbootstrap.com/components/forms/ - LIJIN SAMUEL

Answer 3

CSS缩放方法

div {
-ms-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}

更多信息请参见：https://www.w3schools.com/css/css3_2dtransforms.asp

您可以使用@media min-width和max-width为每个屏幕添加更多的CSS。

- Burhan Kashour

---

你可以看到一些解决方案，如HTML、CSS、JS等等。选择你认为更好的一个。 - Burhan Kashour