现在超过60%的网站流量来自手机,移动端体验不好,等于把大部分用户拒之门外。这篇文章说说移动端适配的关键点。
响应式设计就是一套代码适配各种屏幕。用CSS媒体查询,根据屏幕宽度调整布局。手机上一列,平板两列,电脑三列,自动切换。
Bootstrap、Tailwind这些框架都内置了响应式支持,不用从零写。选一个适合自己的,能省很多功夫。
触摸操作。手机没有鼠标悬停,所有功能都要能点击。按钮要够大,至少44x44像素,太小容易误触。
加载速度。手机网络不稳定,页面要尽可能轻。图片压缩、代码精简、减少请求,这些都要做。
字体大小。手机上字太小看不清,至少16像素。行高也要够,1.5倍左右比较舒服。
输入优化。表单输入框要调大,方便手指点击。不同类型的输入调用不同的键盘,比如手机号调数字键盘。
Chrome开发者工具可以模拟各种手机尺寸,开发时经常切换看看效果。但模拟器和真机还是有差别,最好用真机测试。
找几个朋友,用不同的手机访问网站,收集反馈。iOS和Android的浏览器渲染有时候不一样,都要测。
Google推的AMP技术,能让页面在手机上秒开。但限制比较多,不是所有网站都适合。内容型网站可以考虑,复杂应用就不太合适。
移动端适配不是一次性的工作,要持续优化。多从用户角度想,自己在手机上用着舒服,用户才会喜欢。