如何将你书写的网页放在手机上展示

首先说声抱歉，之前填写的网页图片全部都插入错误了，导致之前很多读者没法查看到具体图片，在这里作者表示十分抱歉，因为我在编写的时候，查看图片一般都是正常的，假如发生了某些未知错误，可以点击我的简书处查看。

1.前言

我们都知道，我们平时在 PC 端编写的代码一般来说都直接在 PC 上查看一下展示的效果就可以。

但是我们的界面在移动端设备上时，我们的用户往往会对界面的内容进行缩放等操作，这时候我们往往需要使用到 ViewPort，以此来限制我们的用户的某些操作。

我们一般常用的两种 viewport.

例：1.设置屏幕宽度为设备宽度，禁止用户手动调整缩放

<meta name=”viewport” content=”width=device-width,user-scalable=no” />

例:2.设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放

<meta name=”viewport” content=”width=device-width,
target-densitydpi=high-dpi,initial-scale=1.0,
 minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>

那么问题就来了，我们在 PC 端是没法去进行界面的缩放操作的，这时候我们就需要将我们的网页放入我们的手机端去运行，我们该如何将我们编写的网页放入我们的手机呢？

2.前期准备

准备工具

1.XAMPP

作用：
我们既然没法将我们的网页放入我们的手机中，这时候我们需要将我们的电脑作为一个基础的服务器端，并且以这个服务器端来作为平台来发布我们的网页。

2.HBulider

作用：

用于对我们的网页进行编辑，并且可以直接通过二维码的方式，可以直接打开我们的网页。

3.正文

这里我不会按照正常开发顺序去完整展示，

我会将具体操作的作用突出出来，所以如果对该流程有任何疑问，可以在下方留言，作者会尽可能回复。

3.1 首先找到你的服务器所在的目录

在 files 文件下去创建一个新的 HTML 网页，之后去使用 HBulider 去打开。

在打开之后我们还需要去对 web 服务器进行一下配置。如下图：

这时候我们还没有结束。我们还需要对请求的地址从新做一次设置，因为 127网段的内容是无法被访问的。

我们还需要会到刚才的首选项中配置一下内部服务器。

打开我们的 网络偏好设置，将你的电脑和手机连接在同一个网段，之后还需要将你的内置服务器IP地址和 你自己电脑的 IP 地址设置为相同的。

这个时候我们还需要将我们测试网址里面的内容也设置为相同的。

这个时候我们就可以去用手机进行一下扫码连接了。

如果上面的操作没有失误，你就可以看到下面的内容啦。

各位小伙伴赶紧去试一试吧，看看把自己的网页放在手机上是一个什么样子。