前端html页面,手机查看

Posted wukaibk

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端html页面,手机查看相关的知识,希望对你有一定的参考价值。

在写前端页面中,经常会在浏览器运行html页面,从本地文件夹中直接打开的一般都是file协议,当代码中存在httphttps的链接时,HTML页面就无法正常打开,为了解决这种情况,需要在在本地开启一个本地的服务器。
本文是利用node.js中的http-server,开启本地服务,步骤如下:

1 下载node.js

官网地址: https://nodejs.org
下载完成后在命令行输入命令$ node -v以及$ npm -v检查版本,确认是否安装成功。

  

2 下载http-server

在终端输入:
npm install http-server -g

  

3 开启 http-server服务

终端进入目标文件夹,然后在终端输入:

http-server -c-1   (??只输入http-server的话,更新了代码后,页面不会同步更新)
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.8.196:8080
Hit CTRL-C to stop the server

  

4 关闭 http-server服务

按快捷键CTRL-C
终端显示^Chttp-server stopped.即关闭服务成功。

 

4 这时候打开页面无法正常显示,终端给出提示

[Wed Aug 21 2019 07:27:19 GMT+0800 (GMT+08:00)] "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/7575.0.3770.100 Safari/537.36" .0.3770.100 Safari/537.36" .0.3770.100 Safari/537.36"
[Wed Aug 21 2019 07:29:43 GMT+0800 (GMT+08:00)] "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36".0.3770.100 Safari/537.36"

4 解决办法

 4.1:装anywhere!然后在要设置的目录下 运行anywhere!就可以解决了! anywhere可以打开静态页面

 4.2:anywhere安装命令:npm install -g anywhere

 4.3:使用:在要启动静态服务的目录下执行

 4.4:anywhere -p 8080

PS C:\\Users\\ASUS\\Desktop\\working\\demo> anywhere -p 8080
Running at http://192.168.43.134:8080/
Also running at https://192.168.43.134:8081/

4 最后一步,在端口号后面添加要打开的文件,手机端输入地址也可以访问这个页面了

  

http://192.168.43.134:8080/index.html

5 吃水不忘挖井人,借鉴了以下网站

https://www.cnblogs.com/nolaaaaa/p/9126385.html

https://blog.csdn.net/weixin_40836227/article/details/99710001

以上是关于前端html页面,手机查看的主要内容,如果未能解决你的问题,请参考以下文章

web前端主要做的是啥工作

怎么查看手机网站页面源码

hlConsole – 手机网页JS日志查看工具

移动端页面布局

移动端页面布局

移动端页面布局