移动端二三事【一】:移动端页面重构基础工作与注意事项。
现在的前端工作中,移动端的地位甚至已经超过了PC端,也趁着有时间,来全面总结一下移动端页面重构的注意事项和一些小技巧。
话不多说,首先项目开始前,首先要进行整体规划和准备工作。
一.整体规划与准备
1.项目构建目录
前端项目如火如荼的发展着,项目开发之初的准备工作也越来越复杂,IT项目的发展都是为了更高效的开发,也就是易用性、高扩展性、高维护性三个方面。构建目录时应就具体情况进行分析,不外乎以下几点:
(1)生产环境与发布环境目录(是否使用打包工具、编译器等,例如webpack、less、sass、postCSS、babel,项目测试无误后输出发布发布环境。)
(2)构建工具目录(gulp、grunt、webpack)
(3)模块加载器目录(require、sea、webpack)
(4)测试环境目录
(5)真机调试(在此注意,浏览器端预览是基于像素比和视口,对移动端设备大小进行的模拟,无法完全模拟移动端设备。)
若不使用额外工具,此项可以忽略。之前常用gulp的browser-sync,会在gulp的构建目录中存在。
(6)主文件目录(大学时刚接触前端可能就这一个目录,在此用于自嘲 ^_^)
包括css目录、js目录、图片、字体等。小项目中,第(3)条的加载器也可包含在此,此目录具有灵活性。
(7)模板与路由等逻辑层目录等(注意:此处针对于使用node.js为后端语言的前端开发者,若后端语言为php、java等可不作考虑)
node.js是趋势,模板目录以express+ejs为例(鄙人只用过express),一般将ejs文件放于一个目录之下,而路由文件放于route目录之下,主文件(app.js)经路由分发后再route下拿到具体的逻辑文件进行执行,然后返回给浏览器端进行渲染(大多后端语言的模板都是如此)
2.选择合适的技术栈
在此不作过多解释,基于尽可能高的开发与执行效率,根据公司要求或个人喜好进行选择。
3.页面单位选型与布局
单位的选型直接关系到页面呈现的效果,根据我的经验有以下几种选择:
(1)简单粗暴的完全使用媒体查询
简单粗暴但确实是想要什么效果就有什么效果,只要你不嫌麻烦。在追求高效开发的前端行业,这项选择可以抹去。
(2)纯纯的使用em
个人更喜欢在响应式的时候使用em在根节点用于区分PC端和移动端的基础字体大小。不过,在纯移动端也不乏为一种不错的解决方案。但是,因为em在计算字体大小时是相对于父节点的字体大小计算的,所以要处理好父节点的fontsize大小就显得尤为重要,而一旦处理不好就会有牵一发而动全身的赶脚。纯纯的使用em,个人不是很建议,因为一个节点使用em不但取决于父节点,更影响着子节点。独立操作的空间稍显不足。
(3)纯纯的使用rem
*使用js设置rem
(function(){ var html = document.documentElement; var hWidth = html.getBoundingClientRect().width; html.style.fontSize = hWidth/15 + "px"; })()
*也可使用媒体查询设置根节点字体大小
但从想法上看,完全的流体布局,是最佳解决方案,但存在兼容性问题,如Chrome的最小字体为12px,但其他多数浏览器最小字体可在12像素下。真机调试时你就会发现,12像素是正常用户可容忍的最小字体,但使用rem稍有不慎就会使字体小于12像素,因此,此选择要求开发者时刻谨记最小字体的临界大小。
(4)VW、VH(这里的V指viewport)
VW:视口宽度的百分比。如1VW为视口宽度的1%,VH同理;vmin视口宽度和视口高度中得最小值,vmax同理;
使用视口单位是真正意义上实现流体布局的选择,因为它除了基于视口大小外不受任何其他因素影响。个人很看好视口单位的后续发展,毕竟是直截了当的根据响应式设计的。但由于种种原因,目前使用还不是很广泛,但在局部布局或解决具体问题时时往往会起到点睛的效果。
(5)viewport缩放适配
固定页面大小,根据设备大小进行缩放适配
(function(){ var w = window.screen.width; var targetW = 320; var scale = w/targetW; //当前尺寸/目标尺寸 var meta = document.createElement("meta"); meta.name = "viewport"; meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+"" document.head.appendChild(meta); })();
(6)em+媒体查询
建议使用,常规单位操作使用em,具体操作使用媒体查询。
(7)rem+媒体查询
建议使用,常规流体布局操作使用rem,具体操作(如最大最小字体等)使用媒体查询。
搭配使用是最佳选择,特殊项目还需要具体分析,以上分析与建议建立在常规的纯移动端项目中。
二,页面的基础设置:
1.常用meta元标签设置
<!--H5页面窗口自动调整到设备宽度,并禁止用户缩放页面--> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <!--网站开启对web app程序的支持--> <meta name="apple-mobile-web-app-capable" content="yes" /> <!--在web app应用下状态条(屏幕顶部条)的颜色,默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)--> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!--禁用掉uc浏览器判断到页面上文字居多时,会自动放大字体优化移动用户体验。--> <meta name="wap-font-scale" content="no"> <!--忽略将页面中的数字识别为电话号码--> <meta name="format-detection" content="telephone=no" /> <!--忽略Android平台中对邮箱地址的识别--> <meta name="format-detection" content="email=no" /> <!-- QQ强制横屏或竖屏显示 --> <meta name="x5-orientation" content="portrait|landscape"/> <!-- QQ设置全屏 --> <meta name="x5-fullscreen" content="true" /> <!-- UC强制竖屏或横屏显示 --> <meta name="screen-orientation" content="portrait"> <!-- UC全屏显示 --> <meta name="full-screen" content="yes"> <!-- 禁止电话号码和邮箱识别 --> <meta name="format-detection" content="telephone=no, email=no" />
普通移动端的头部:
<meta charset="UTF-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <!--H5页面窗口自动调整到设备宽度,并禁止用户缩放页面--> <meta name="apple-mobile-web-app-capable" content="yes" /> <!--网站开启对web app程序的支持--> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!--在web app应用下状态条(屏幕顶部条)的颜色,默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)--> <meta name="wap-font-scale" content="no"> <!--禁用掉uc浏览器判断到页面上文字居多时,会自动放大字体优化移动用户体验。--> <meta name="format-detection" content="telephone=no" /> <!--忽略将页面中的数字识别为电话号码--> <meta name="format-detection" content="email=no" /> <!--忽略Android平台中对邮箱地址的识别--> <title>XXXX</title> <link rel="icon" href="images/favor.png">
2.特殊css重置样式
body * { -webkit-text-size-adjust: 100%; /*取消横竖屏的字体缩放*/ -webkit-user-select: none; /*ios取消文字选中*/ } a, input, button{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*取消标签选择高亮*/ } input, button { /*ios取消圆角*/ -webkit-appearance: none; border-radius: 0; }
3.清楚font bosting设置
webkit内核浏览器在智能判断段落标签字体可能会使用户看不清楚时,会将字体智能放大。
解决方法:为包含段落内容的标签添加max-height。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步