正文

移动端兼容性浅析

ysx_小鱼  ysx_小鱼  2022-09-08  291

关键词：

“移动网民的规模将在2013年底达到5.0亿，增速为19.1%。预计到2017年，移动网民将赶超PC网民，成为互联网的第一大用户群体，移动端将成为网民最主要的上网渠道。互联网的加速渗透和全民移动互联有望在下一个5年实现。在过去的几年时间里，移动智能设备快速普及，配置迅速提升，许多过去在PC端才能完成的需求都转移到了移动端，导致PC端流量也逐渐向移动端转移。未来几年许多互联网产品移动端的流量即将超过PC端，整个互联网的使用场景产生巨大变迁。”

——《2014年中国移动互联网行业年度研究报告》

来自艾瑞的《2014年中国移动互联网行业年度研究报告》向我们展示着在未来的互联网世界，移动端将成为主要战场，若想在浪潮汹涌中屹立不倒，我们就要开始移动端，开始一个新的征程。

作为一名前端工程师，我们享受过或仍在享受着pc端各种“非现代”浏览器的“折磨”，面对移动端我们又将面临哪些兼容性的考验呢？篇幅所限本文将向各位展示我们在移动端开发过程中针对兼容性问题的一点经验，主要包括方案选型及入门基础，如果您是大牛、大神或是大神牛欢迎指点、指正，如果您是和我一样的移动端新鸟欢迎探讨共同学习。

在移动端的兼容性上主要需要关注哪些方面的问题，对其又是如何定级的呢。由于要考虑设备（pc设备or移动设备）、厂商、机型、操作系统及版本、浏览器及版本等多方面因素，移动端兼容性被毫不夸张得称为“后IE6时代”。如何在成本允许的情况下将页面更好地呈现给用户，让我们先来看一组数据：

由图可见，智能手机占据了常用移动设备终端95.2%的份额，而智能手机中安卓及IOS两大平台占比总和达到了89%，综合成本、效率及整体效果考虑，我们暂且将移动端浏览器的兼容性定级为：兼容IOS和安卓平台的主流机型、系统及浏览器。

目前针对跨终端的方案，主要分为两大阵营：一套资源Vs两套资源。第一种是通过响应式或页面终端判断去实现一套资源适配所有终端；第二种是通过终端判断分别调取两套资源以适配所有终端。这两种思路我们并不能斩钉截铁的说哪一个更优选，正所谓“合适的才是最好的”。下面来对这两种思路进行简单的对比：

思路一：通过响应式或页面终端判断去实现一套资源适配所有终端

优势：只需维护一套资源，维护成本较低。

劣势：需加载适配各个终端的各个资源，在不同终端通过响应式布局实现不同展现，部分交互效果需要在页面中做终端判断，代价较大，若图片资源为一套，部分图片在超高分辨率设备（例如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请求的一部分，那么我们就可以在服务器端获取想要的信息，进而判断并引导用户到达相应的页面地址。

下面我们通过详细分析一个http请求中的user-agent首部来了解其原理：

要点明晰及注意事项：

css像素与设备像素：二者的区别在于前者是抽象的，用于浏览器渲染页面，而后者是设备的最小物理单位。可参考A pixel is not a pixel is not a pixel进行理解。

视口：移动端浏览器有两个视口，即可见视口与布局视口，二者的区别在于前者为基于移动设备屏幕的实际宽度，而后者为我们为页面定义的用于浏览器渲染的大小。可参考A tale of two viewports进行理解。

媒体查询：找准断点。

响应式布局：当上下文环境发生变化时可考虑变化布局来展现优雅。当元素脱离文档流绝对定位时，才是相对高度定义的。

响应式字体：font-face绝对会对你的站产生巨大的影响。当容器中定义字体单位为em时要注意继承性，例如：当我们定义某个块级元素的“font-size：1.5em; line-height: 2em;”时，line-height的实际行高为1.5em*2即3em。

文档声明：文档声明建议用html5的：<!DOCTYPE html>，它指示浏览器关于页面使用哪个 HTML 版本进行编写的指令。同时需要定义文档的视口信息，如：<meta name=“viewport” content=“width=device-width, initial-scale=1, user-scalable=no”>width=device-width告诉浏览器渲染该页面的宽度等于设备宽度，initial-scale=1告诉浏览器初始化缩放的比例1:1，user-scalable=no禁止用户缩放页面。

兼容性测试:

调试工具推荐chrome的模拟器加真机测试，更多关于debug的工具可以参考Debugging Mobile Web Page这篇文章。

总结：

移动端开启了一个时代，它不是虚无缥缈或者高不可攀的，它反而让曾经被忽视的渲染方式及web标准等实质性的问题更加清晰，相较上述两种思路，我们更倾向于各司其职思路清晰的第二种方案，我们可根据不同终端做不同的交互设计、视觉设计，研究不同的前端技术、用户体验，适合的才是更好的。做为前端工程师，让我们理解原理，探索实践，跨终端任重而道远。

浅析即时通讯移动端im开发中登录请求的优化

...的问题，不过它不是本文本讨伦的内容。本文将针对移动端IM的登陆功能给出相应的优化建议。源起在移动IM模块中，最核心最复杂的模块莫过于登录模块。一个没有经过很好优化的登录模块往往耗时久且浪费流量：... 查看详情

浅析即时通讯移动端开发dns域名劫持等杂症

...第一跳，而这一跳很多时候会“失足”（尤其是移动端网络），导致访问错误内容、失败连接等，让用户在互联网上畅游的爽快瞬间消失。而对于这关键的第一跳，包括鹅厂在内的国内互联网大厂，... 查看详情

浅析im即时通讯开发移动端dns域名劫持问题

...第一跳，而这一跳很多时候会“失足”（尤其是移动端网络），导致访问错误内容、失败连接等，让用户在互联网上畅游的爽快瞬间消失。而对于这关键的第一跳，包括鹅厂在内的国内互联网大厂，都... 查看详情

浅析响应式布局，rem布局,媒体查询布局(代码片段)

...而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。为什么要有响应式布局？在移动互联日益成熟的时候，在PC端开发的网页已经无法满足移动设备的要求。通常的做法是针对移查看详情

移动端兼容

移动端前端开发注意点第一次接触移动端开发，发现web端和移动端的差别还是很大的，我主要记录移动端的一些内容：移动端与web端在网页设计与交互方面的差别移动端注意点一些小技巧移动端的一些问题及解决方法移动端与web... 查看详情

移动端兼容性问题解决方案

1.IOS移动端click事件300ms的延迟响应移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的,2007年苹果发布首款iphone上IOS系统搭载的safari为了将适... 查看详情

移动端兼容性问题解决方案

前端：移动端和pc端的区别

...动端和PC端有什么区别，当时回答的时候主要是回答了在兼容性、网速、适配、页面布局等方面的不同，但是还是很不系统，所以这里做一个总结。第一：PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容... 查看详情

实战的移动端兼容性解决

ISOinput[type="number"]{-webkit-text-fill-color:black;-webkit-opacity:1;opacity:1;}解决ios里，input框内color设置black，文字任为灰色input{-webkit-appearance:none;}http://blog.csdn.net/u012518659/article/details/49913 查看详情

移动端常见兼容性问题及解决办法

当使用transform:translate3d(-50%,-50%,0)居中弹框（div）时，在pc端，内部的文字会模糊。解决办法：给body定义样式body{font-family:HelveticaNeue,Helvetica,PingFangSC,HiraginoSansGB,MicrosoftYaHei,SimSun,sans-serif;}用position:absolute/fixe 查看详情

兼容性测试规范-移动端

摘要：一般的兼容性测试以版本迭代为周期、在产品测试阶段以及上线验证阶段进行。在此规范中将详细说明我们的规范形成依据，以及在此基础上的详细分析和对应的兼容性测试规范，包括如下方面：（1）需要进行兼容... 查看详情

移动端可以兼容fullpage.js吗

参考技术A可以。fullpage.js全屏滚动插件，基于jq库，可以利用它很方便、很轻松的来制作全屏网站；它支持手机、平板触摸事件，也支持CSS3动画，对移动端有很好的兼容性。查看详情

移动端pc端网页特效(代码片段)

...系列scroll动画原理移动端网页特效触屏事件移动端浏览器兼容性较好，不需要考虑以前JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方。比如触屏事件touch（也称触摸事件）& 查看详情

select标签移动端兼容

select选中事件用change，（用click会执行两次）；select标签对移动端的兼容：.custom-selectselect{width:100%;margin:0;background:none;border:1pxsolidtransparent;outline:none;/*Prefixedbox-sizingrulesnecessaryforolderbrowsers*/-we 查看详情

移动端常见的兼容性问题

...也成了一个重要的方向，但由于设备的不统一会造成一些兼容性问题，1、安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为... 查看详情

移动端flex布局微信和uc的兼容性

请查看以下两个链接http://www.tuicool.com/articles/Afq6Bzq http://www.sheng00.com/2148.html 查看详情