我正在参加「掘金·启航计划」
前段时间参与了一个移动端页面开发的需求，开发时明显感觉与 pc 端开发相比，移动端页面的限制会更多😭
需求结束后思考了一下究竟是哪些方面感觉不舒服？有没有对应的解决方法？以便下次开发移动端页面时能提升开发效率和体验。
移动端网页容易出现布局问题 🤬
因为页面空间小，容易出现元素重叠、挤压、换行等样式问题，怎么在不同尺寸的设备上合适地展示页面？
解决办法：
-
使用
<meta name="viewport">标签 ✨这个标签想必做过移动端页面开发的同学都不陌生吧？它就是专门为移动端展示优化而增加的标签。
先来看看它的作用是什么？
它可以设置移动端页面宽度、缩放比例、是否允许用户缩放网页等
它的基本属性有哪些？
属性名 含义 取值范围 width 控制视口大小 具体数值或 ‘device-width’ initial-scale 页面初始缩放比例 0.0 ～ 10 minimum-scale 控制页面允许被缩小的倍数 0.0 ～ 10 maximum-scale 控制页面允许被大的倍数 0.0 ～ 10 user-scalable 控制是否允许放大和缩小页面 yes 或 no 需要注意的是在移动设备上默认页面宽度为 980px：
假如我们希望页面的视口宽度与设备宽度相同，同时初始缩放比例为 1，可以在 <head> 里增加这个的 meta 标签<meta name="viewport" content="width=device-width,initial-scale=1">：
这样页面的展示就符合我们的预期了
-
使用 vw、vh 视口单位
vw、vh 都是视口单位简而言之：100vw = 视口宽度，100vh = 视口高度 （够简单吧 😅
-
使用 rem 相对单位
rem 在移动端开发中很重要，因为不同移动设备有着不同的尺寸和分辨率，如果我们用固定的 px 作为元素大小单位会发现不够适用
而 rem 是相对单位大小，它相对的是根元素 html 的字体大小，比如：
<html>
<head>
<style>
html {
font-size: 14px; // 这里将 html 的字体大小设为 14px
}
.content {
font-size: 2rem; // 在页面展示时将会被计算成 14 * 2 = 28px
}
</style>
</head>
<body>
<div class="content">rem</div>
</body>
</html>
所以我们可以根据设备大小动态设置根元素大小，从而成比例地更改页面里其它元素的大小
const BASE_PAGE_WIDTH = 370
const BASE_SIZE = 16
function setRem() {
const scale = document.documentElement.clientWidth / BASE_PAGE_WIDTH
document.documentElement.style.fontSize = `${scale * BASE_SIZE}px`
}
setRem()
真机调试比较麻烦 😌
尽管可以在电脑浏览器上模拟移动设备的展示情况，但并不够真实，在开发和测试阶段仍然需要在真机上调试；
同时可能我们的测试环境需要连接 vpn 或添加特定的请求头才能访问到，所以在手机上需要通过电脑代理才能访问测试环境，从而进行开发测试；
最后，即使能在手机上访问到本地开发和测试环境的页面，你会发现当页面报错的时候你压根就看不到 log 日志输出或网络请求，这种干看着页面有问题却不能进一步排查的感觉就很难受 😖
还好有一些工具可以帮我们化解这些难题 🥳
解决办法：
- 首先我们可以使用 whistle 或 charles 来连接电脑代理，这里以 whistle 为例：
- 电脑安装并启动 whistle
- 手机和电脑在同一局域网下
- 手机设置网络代理
- 手机安装 https 证书
具体操作可以访问官方文档的详细步骤哈
Done！现在手机会通过电脑作为代理来访问网络，可以直接访问开发地址或测试环境地址啦～
- 然后我们可以使用 VConsole 在移动设备上进行调试，它相当于在页面上加了一个控制台，从而让我们可以查看页面上的日志输出、网络请求等，它的用法也很简单：
// 使用 npm 安装
npm install vconsole
import VConsole from 'vconsole'
new VConsole()
// 使用 CDN 安装
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
// VConsole will be exported to `window.VConsole` by default.
const vConsole = new window.VConsole();
</script>
然后你会发现页面右下角多了一个 vConsole 的按钮：
我们可以测试一下打印日志：
document.addEventListener('click', handlePageClick)
function handlePageClick() {
console.log('Daniel Yang')
}
在点击页面后再点击 vConsole 按钮会发现在展开的面板里 log 一栏已经显示出 log 的内容：
同时我们也可以在 VConsole 面板上查看页面元素结构、客户端存储、网络请求等，总之非常的 nice 🤗
以上就是自己对一次移动端网页开发过程中遇到的问题小小的总结，如果你在移动端开发中有遇到其它印象深刻的坑，欢迎一起留言讨论哦
原文链接：https://juejin.cn/post/7243757233666195515 作者：卡布奇诺有点苦
