## 前言 基于web兼容思想，将兼容问题进行分类，并作出了兼容适配文档，以供参考。 ## 一 浏览器兼容 #### 1.1 浏览器兼容列表以及版本 | 浏览器 | 最新版本 | 占有率 | 备注 | | --- | --- | --- | --- | | 谷歌（ideal浏览器，40%） | 55.0 | 38.68% | 理想浏览器，开发浏览器(webkit) | | 360安全浏览器 | 8.1.1 | 15.59%（包括ie8） |双内核（兼容ie内核，极速webkit内核） | | 搜狗浏览器 | 7.0.6 | 4.46% | 双内核（兼容ie内核，极速webkit内核） | | 火狐浏览器 | 50.1.6 | 1.97% | 火狐内核（gecko） | | Sari(苹果系统） | 8.0.1 | | | | Ie8,ie11,edge | 11,edge | Ie9:5.68%; | 向下最低兼容ie8,9、10引导用户升级或者更换浏览器（Trident） | * 浏览器兼容列表 网站项目前端页面支持的浏览器列表，不在此列表内的浏览器不做兼容，引导用户去下载谷歌浏览器，如果是ie引导用户升级。浏览器兼容是指该网站全部页面可正常显示以及流程可通，不保证全部效果以及特殊功能可实现。具体详见下面的兼容标准。其他浏览器市场占有率参考：qq：5.59%，2345:4.73%，ie7:4.13%,猎豹：2.25%，其他16.91%。数据来源于百度统计，仅供参考。 * 浏览器版本 测试与前端保持一致的浏览器最新测试版本，不在最新版本的用户引导用户升级，浏览器版本在每个季度开始检测一次是否有新版，如果有请测试以及前端更新版本并更改标准文档的浏览器版本记录。 * 备注：希望产品能定义好产品的最终显示效果，以谷歌为最佳显示器考虑，ie可兼容不可保证完美效果，做好预先的准备工作（产品设计环节以及项目开始环节）。对于ie或者其他浏览器不支持的，有对应的产品替代方案或者提示语。 ### 二 不同分辨率兼容 #### 2.1 主要分辨率列表 | 分辨率 | 比例（单位：%，包括手机，仅供参考） | 备注 | | --- | --- | --- | | 1900*1200 | 15 | 后期主要分辨率 | | 1336*768 |8.4 | 14寸电脑普通分辨率 | | 1024*768 | 3.9 | 14寸电脑低分辨率，ipad，医院设备分辨率| | 1280*1024 | 极少 | 部分医院设备分辨率 | | 1440*900 | 5.91 | 14寸电脑主打高分辨率 | | 1600*900 | 2.92 | 部分高分辨率设备 | | 1920*1080 | 12 | 高分辨率 | | 720*1080 | 5.13 | 手机分辨率，可忽略 | * 分辨率列表：主要兼容三种1024*768,1336*768,1900*1200，其他浏览器除非用户特殊要求才会测试或者适配。另外：经反馈，医院设备多为1024*768,1280*1024，如果是内网网站产品，可以针对特定用户做特定设计。另外网站页面视图宽度要比实际分辨率小15左右，高度要小150，建议比如1024*768分辨率，设计稿一屏内容大小做成1000*600 的，同时考虑到产品、设计考虑所有分辨率下的正常显示，不可能所有分辨率的显示效果完全相同。 * 分辨率适配要求：向下适配最低1024*768，整体布局正确。 #### 2.2 主要分辨率列表 * 不同分辨率适配布局方式 | 布局方式 | 说明 | | --- | --- | | 固定布局 | 按照设计稿取值，所有元素固定宽高，一套设计稿一套样式 | | 流式布局（百分比布局） | 按照设计稿取百分比，部分位置取固定值，需要产品以及设计考虑到最低分辨率1024*768时，各个位置的显示，一套设计稿，一套样式 | | 响应式布局（媒体查询+流式布局） | 按照不同分辨率以及不同分辨率下对应显示方案的设计稿做出页面，多产品多设计稿多样式方案，成本以及工作量最大。 | * 补充说明：要求产品在设计开始时考虑到不同分辨率的显示，以及使用何种布局方式，并与设计、前端、测试反馈沟通好。 ## 三 兼容适配鉴定 ### 3.1 问题分类（以下主要针对ie8可行性做特殊说明） #### 3.1.1 布局样式 * **描述**：页面排版，元素位置，元素大小等类似 **要求**：必须适配兼容 #### 3.1.2 效果 ：静态效果+动态效果 * **描述**：静态效果，比如圆角，旋转，透明度，特殊字体，输入框提示文字,h5的部分标签。 **要求**：圆角可实现，透明度可实现，特殊字体可用图片，输入框提示可模拟可引入插件，旋转变形不可实现可以用图片以及js模拟（复杂的放弃）。 * **描述**：动态效果，比如飞入飞出，渐变进入，百叶窗，复杂运动效果。 **要求**：使用前参考是否有对应的参考效果，测试兼容性，如果不兼容，放弃。主要针对：css3中的属性：transform相关的。详细兼容性说明参考：http://caniuse.com。谷歌浏览器实现都需要额外调研或者花费时间才能搞定的效果列入调研部分，不属于普通兼容问题。 #### 3.1.3 复杂的，酷炫的，功能性的效果或者插件 * **描述**：滑屏，swipper插件等类似的布局插件，切换插件。 要求：兼容性参考官网说明或者咨询前端（以前端组长——张兵的回复为准）。 * **描述**：未实现过的或者本身不支持ie8的轮播图插件，效果插件等。 **要求**：参考插件的说明文档，针对是否支持做兼容，如果不支持做代替效果或者提示语。 * **描述**：功能性插件比如日期控件，下拉框控件，相册控件，交互控件 **要求**：同上。 * **描述**：基于画布或者3d效果或者h5特定标签的，比如echarts,放大镜，粒子效果，h5游戏等。 **要求**：同上。 #### 3.1.4 特殊兼容，未实现过的产品体验需要调研的部分 * **描述**：当某部分插件或者特殊效果在谷歌不可用或者在ie8明确不兼容时，需要提交需求到前端进行1-2天的技术调研，给予回复以及对应的解决方案。 **要求**：尽量将这样的需求或者实现预先反馈，建议在项目开始时就进行调研，对应的项目前端人员全心负责常规页面和常规兼容，等这部分调研结果出来，在决定对应的项目中如何具体实现或者ie8兼容方案。 ## 四 兼容适配的核心思想 #### 4.1 兼容适配的整体原则 1)保证规定浏览器以及规定分辨率下样式布局正确，显示正确，常规功能可用，与设计稿达到95%以上的效果符合。 2)网站整体风格一致，实现组件或者组成部分可复用，可移植。 3)网站产品以谷歌最新版本为最佳体验浏览器，其他浏览器允许一定的显示误差以及插件或者效果稍差，ie8在技术不支持的情况下，做产品体验降级，但要保证基本布局以及功能。 4)整体的网站中建议使用常规的方式，部分产品体验做提升。针对高大上酷炫的整体产品，每一个细节都要详细调研，是否可行，是否兼容，是否可改成需求的效果。 5)网站在提交测试之前，前端做基本的兼容以及分辨率测试，减少测试工作量以及不必要的问题。 6)用户不明确或者强烈要求适配ie8时，适当降低验收标准，保证主流浏览器可用尤其谷歌，ie8可正常显示；用户明确要求只适配ie8以及特定分辨率时，优先重点适配ie8，其他主流浏览器降低标准，谷歌正常显示； #### 4.2 兼容适配的周期 首先所有项目无特殊说明，都要达到以上描述的兼容适配效果，但建议前端或者项目开发中，如果项目紧急需要上线的，先整体以及谷歌显示归纳为一期，，优先上线，相关兼容放到二期开发；如果项目不紧急，不需要马上上线，也是优先建议保证谷歌正常；公司内部网站或者定位高端的网站，舍弃ie8体验，直接引导用谷歌。