市场上手机大小各式各样,事实上目前还没有完美适配移动端的方案,常用的有vw,rem,百分比等。
前端在PC端开发移动端项目时,通过F12看到的还是和真机有区别,因此我们需要真机测试。
首先,真机测试的必要条件:
1、手机与电脑在同一个局域网内,比如手机和电脑连接同一个WIFI。
2、需要知道开发电脑的IP地址。
步骤:
1、查看电脑IP地址
找到电脑的window键和R键,同时按下,弹出窗口
image.png
点击确定,输入ipconfig
image.png
IPv4地址即为此电脑IP
image.png
2、修改项目配置
找到项目中config文件夹下的index.js,找到host值把 'localhost' 修改为此电脑的IP地址
image.png
3、重启项目
接下来,你可以选择把项目地址,例如:192.168.1.111:8080输入到手机浏览器,打开即可看到页面,并且和电脑端同步,修改代码,手机端页面也更新。(注意:手机电脑连接同一个WIFI)
或者,你可以选择在草料二维码网站生成二维码,扫码也可看到。
草料二维码网站:https://cli.im/
网友评论