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

请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。

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

Paste_Image.png

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

2.HBulider

Paste_Image.png

作用：

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

3.正文

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

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

说个题外话。

下方说的具体方法，具有一定参考性，假如自行测试的时候发现，你打开HBulider 的时候发现，你所打开的网页地址直接是 files:/// 的话，处理方法和本文略有不同。

简单处理方法是可以从新在 HBulider 中去新建一个 APP 项目，之后直接去设置内置服务器即可，其余步骤如下。

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

Paste_Image.png

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

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

Paste_Image.png Paste_Image.png Paste_Image.png

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

Paste_Image.png

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

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

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

Paste_Image.png

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

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

Paste_Image.png

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