很多时候我们开发的页面需要自适应的移动和移动终端，那么如何实现呢？其实很简单。看下面。
我们先来看一个简单的网页代码：htmlHeadMetaCharset=' UTF-8 '//head body hello我不是自适应网页/body/html
在PC上的实现效果如图。
在移动终端上的实现效果如图所示。
很明显，在移动端显示的时候，还是在pc模式下显示。所以字体很小，看不清楚。它需要被放大。好了，现在开始让网页自适应，在pc端和移动端都能正常显示。其实很简单。我们只需要给页面添加一个meta标签，如下：meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '。这个meta标记的名称是viewport，内容是由逗号分隔的许多属性的集合。MlHeadMetaCharSet=' UTF-8 '/meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '/head body hello我不是自适应网页/正文/html
新代码在pc端运行的效果如图所示(与添加名为viewport的meta标签之前相同):
但是在手机上运行的结果就不一样了，如下图所示：
大家可以看到，显示正常，也就是自动适配手机和pc。我们也可以坐下来比较一下添加这个标签前后的显示效果：
现在清楚了吗？现在让我们分析一下我们添加的这个meta标签。首先，meta标签存储了一些用户不可见，但浏览器可见的元信息，一般存储为键值对。例如，这个meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '名称是键，键值是viewport。是内容值，即“宽度=设备宽度，初始比例=1.0”。那么，width=device-width表示可见区域的宽度就是设备(手机或PC)的宽度。Initial-scale=1.0表示页面第一次显示时，按照实际大小显示，不做任何缩放(添加这段代码之前，移动终端上的文字因为缩放而变小)。但是实际上我们可以学习一些属性。如下：1 .用户可伸缩性：否；//禁止用户缩放页面2。最大比例=1.0，最小比例=1.0；//可见区域的最大和最小缩放级别是实际大小。(设置好以上两点后，用户就不能缩放网页了，网页也就不用担心被用户缩放变形了。)
特别提示
嗯，基本就是这样。有问题可以在【你有】下提问。如果你没有问题，请喜欢他们，投点什么吧。写文章需要大家的鼓励和支持。
