PC端、移动端的页面适配及兼容处理

来自博客园一网友的分享:

答案参考 https://www.cnblogs.com/shenxiaolin/p/5388464.html(来自http://www.uisdc.com/mobile-compatibility-analysis和http://www.ituring.com.cn/article/130015的整合)

第一种是通过响应式或页面终端判断去实现一套资源适配所有终端;

优势:只需维护一套资源,维护成本较低。

劣势:图片资源为一套,部分图片在超高分辨率设备(例如iphone系列)下会失真,且在非wifi情况下即使加了延时加载也易出现加载慢的情况。

技术选型:jquery(或原生js等)+ 响应式 + 前端模块加载器(seajs或RequireJS等)+ css预处理器(sass 或less等)。jquery较好的兼容性配合响应式可相对代价较小地实现跨终端。前端模块加载器主要负责按需加载,以提高页面加载速度,css预处理器 的变量、运算、嵌套等特性可大大提高手动计算响应式的效率,再也不用担心我把比例算错了。当然后两者可参考需求及成本决定是否采用。

第二种是通过终端判断分别调取两套资源以适配所有终端。

优势:可根据不同端做个性设计及个性化信息推送且可按需加载,如移动端可配合重力感应、不同手势做各种炫酷拽效果,pc页面可不受流量限制做适合pc端的效果。

劣势:需维护两套资源,维护成本增加。

技术选型:zepto(或xui等移动端轻量级框架)+ 响应式 + 前端模块加载器 + css预处理器 + 终端适配。zepto作为jquery的移动端版本,依然延续其自身优势,大幅优化了移动端API且摒弃了兼容”非现代浏览器”的冗余代码,成为移动端轻便可用的js框架代表,对于习惯了jquery的同学来说简直是不二之选!

终端适配目前一般通过ua判断来实现。ua判断可放在服务端也可放在页面中,在代理服务器中做跳转更快、更准确且不走应用程序层,即使浏览器禁用了js依然可以跳转到相应的地址,同时秉承着公共服务放在服务端这样的云端服务理念,我们选择了通过代理服务器做终端适配。

User-Agent嗅探,即Web浏览器发送一个Web页面或资源请求时,会发送一个User-Agent首部作为HTTP请求的一部分,那么我们就可以在服务器端获取想要的信息,进而判断并引导用户到达相应的页面地址。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页