如何使表格移动友好？

Question

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

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

在完整的移动设备屏幕上，让这款表格非常适合移动设备的最佳方式是什么？我应该用CSS还是Bootstrap来做？是否有一些通用的方式来达到它？

Answer 1

添加元视口标记，使表单适合手机屏幕。视口是用户在网页上的可见区域。 视口因设备而异，在手机上比在计算机屏幕上小。

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

More details on viewport

Answer 2

将此元标记添加到页面的头部，

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

您也可以使用自举网格布局。

Answer 3

css scale method

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