请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。
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
各位小伙伴赶紧去试一试吧，看看把自己的网页放在手机上是一个什么样子。
网友评论