响应式网站兼容性之困与破局之路

一、响应式网站兼容性问题的呈现 

1. 用户体验受影响

响应式网站在不同屏幕尺寸下自动调整页面布局和展示内容，本是为了提供更好的用户体验，但实际情况却并非总是如此。由于页面布局随屏幕尺寸变化，可能会出现样式崩塌的情况。例如，部分设备上可能出现错位问题，这使得网站无法正常访问，严重影响了用户的体验感。如果某些尺寸没有进行专门设计，那么网站样式崩塌的概率就会大大增加，从而给部分用户带来不好的使用感受。

2. 代码精简与优化难题

对于响应式网站来说，所有设备访问同一份代码，这在一定程度上带来了便利，但也带来了不少问题。首先，无用代码会对网站优化产生影响，这些无用代码不仅占用空间，还可能干扰搜索引擎对网站的抓取和索引。其次，由于搜索引擎区分电脑端和手机端，所有设备访问同一份代码不利于网站关键词优化。

3. 移动端流量消耗大

响应式网站为了适应不同分辨率，对代码量的要求相对较高。代码量增多，再加上所有尺寸的图片加载等因素，会消耗更多的流量。这就容易导致在移动端出现加载缓慢的现象，用户可能需要等待很长时间才能看到网站内容。甚至可能出现网站加载很久了，但是不出现内容的情况。

4. 浏览器兼容性差

响应式网站对 IE8 及以下版本浏览器兼容性很差。这种兼容性问题可能会导致样式 “塌陷”，即网站的布局和外观出现严重变形。同时，还可能无法调用一些 JS，从而导致关键数据无法显示。这对于使用旧版本浏览器的用户来说，是一个很大的困扰。

5. 缺乏灵活性

对于功能复杂的网站来说，做成响应式可能会导致移动端界面过长。比如电子商务类型的网站，在电脑上看到的内容全部要在移动端显示，必然会使移动端网站界面变得很长。这不仅影响用户体验，还可能引发一系列其他问题，如加载缓慢、样式崩塌等。同时，还需要根据移动终端属性重新设计信息框架，这对响应式网站的要求非常高，难度和成本也相应增加。

二、常见的导致响应式网站兼容性问题的因素 

1. 跨平台设计因素

浏览器兼容性：不同的浏览器对网站设计有着显著的影响。常见的浏览器如 IE、Chrome、Firefox、Safari 等，在兼容性方面存在差异。尤其是当使用最新技术时，更需要特别注意各浏览器的兼容性。例如，某些新技术可能在 Chrome 中表现良好，但在 IE 中却可能出现问题。所以，在设计响应式网站时，要充分考虑不同浏览器的特点，进行全面的测试，确保网站在各种浏览器上都能正常展示和运行。

语言支持：不同操作系统的语言差异，如中文、英文、阿拉伯文等，会对网站产生影响。当网站有文字描述时，必须注意语言兼容性。如果语言不兼容，可能会导致文字显示错误或乱码，影响用户体验。因此，在跨平台设计中，要确保网站能够适应不同的语言环境，为用户提供良好的阅读体验。

屏蔽无用标签：无用标签会对网站性能造成不良影响。在跨平台设计时，应屏蔽这些无用标签，以提高网站的加载速度和性能。例如，一些过时的标签或不必要的注释可能会占用空间，影响网站的运行效率。通过屏蔽无用标签，可以优化网站的性能，提升用户体验。

2. 响应式设计因素

网页排版：针对不同尺寸设计网页排版至关重要。由于如今设备种类繁多，屏幕尺寸各异，所以在响应式设计中，需要细心考虑元素的摆放和尺寸。比如，在小屏幕设备上，要合理安排内容，避免过于拥挤；在大屏幕设备上，可以充分利用空间，展示更多的信息。只有精心设计网页排版，才能确保网站在不同尺寸的设备上都能呈现出良好的效果。

字号：字号需要灵活调整，以确保在不同设备上清晰可见。不同设备的屏幕分辨率和尺寸不同，对字号的要求也不同。在小屏幕设备上，字号过小可能会导致用户难以阅读；在大屏幕设备上，字号过大可能会显得不协调。因此，要根据不同设备的特点，合理调整字号，为用户提供舒适的阅读体验。

图像尺寸：为不同设备准备相应尺寸的图片，可以保证加载速度和展示效果。如果在不同设备上使用相同尺寸的图片，可能会导致加载速度缓慢，影响用户体验。例如，在小屏幕设备上使用高分辨率的大尺寸图片，不仅会占用大量的流量，还会延长加载时间。因此，要根据不同设备的需求，准备合适尺寸的图片，以提高网站的性能和用户体验。

导航条设计：导航条在不同屏幕尺寸上的设计也需要加以考虑，以方便用户操作。在小屏幕设备上，导航条可能需要采用简洁的设计，以节省空间；在大屏幕设备上，可以设计更加丰富的导航条，提供更多的功能。同时，要确保导航条在不同设备上都能易于操作，方便用户快速找到所需的内容。

三、响应式网站兼容性难题案例 

1. 布局混乱问题

在响应式网站的开发过程中，布局混乱是一个常见的兼容性难题。例如，产品列表采用浮动布局可能出现等高问题和布局乱掉情况。当使用 flex 布局时，虽然 flex 布局在现代浏览器中具有很大的优势，但兼容性又不好。为了解决这个问题，可以选择 display: inline-block 并巧用:after 来解决部分问题。

熟悉移动布局的程序猿都知道在弹性布局（flexbox）和网格布局（grid）中，都有一个属性 justify-content，space-evenly 是其值之一，能实现子元素均分容器空间的效果。但是通过 can i use 网站查询，发现 space-evenly 的兼容性并不好，像 ios 的 safari，10.3 以前版本彻底不支持，10.3 开始 grid 布局支持，但是 flexbox 布局不支持。而 space-between 的兼容性要好得多，我们可以在容器的最前和最后利用伪元素添加宽度为 0 的元素，这样就相当于在第一个和最后一个元素两侧加了同样大小的空白，从而模拟实现 space-evenly 的效果。

2. IE8 以下兼容性问题

在宽屏设计下，IE8 以下浏览器兼容性不好，这给响应式网站的开发带来了很大的挑战。可通过加载调整样式和引用插件解决，但可能出现延迟和闪屏，以及瀑布流布局错乱等问题。

为了解决 IE8 以下浏览器的兼容性问题，可以采用以下方法：

额外写调整的样式，针对小于特定宽度的显示屏，统一采用特定宽度的样式。例如，针对小于 1200PX 宽度的显示屏，统一采用 960 宽度的样式：<link rel=\"stylesheet\" type=\"text/css\" media=\"screen and (max-width:1200px)\" href=\"css/cloud_960px.css\">。

针对 IE8 以下的兼容性，引用插件 respond.min.js：<![if lte IE 8]><script type=\"text/javascript\" src=\"JS/respond.min.js\"></script><![endif]-->。

然而，这样可能会有一些瑕疵，由于是 JS 载入后判断，所以可能会有延迟，稍微闪屏。但这都是可以接受的。不过，又会出现一个问题，页面上引用了瀑布流。载入页面后瀑布流先应用了样式，respond 载入之后又判断是窄屏，再次应用了 960 的样式，这样就导致了瀑布流布局错乱。

解决这个问题的办法是使用 jquery 的 resize 事件，判断容器宽度变化后，重新执行瀑布流。类似的问题都可以这么解决。IE6、IE7、IE8 测试正常，至于 IE9 以上支持 media query，不需要额外的 JS 去判断。

四、提高响应式网站兼容性的方法 

1. 针对不同浏览器的调试方法

1. PC 浏览器调试：IE 浏览器可通过修改 “文档模式” 调试，也可使用 IETest 或虚拟机测试。

对于 IE 浏览器的调试，打开项目后，可以通过修改 “文档模式” 来调整 IE 的版本进行调试。同时，我们可以使用 IETest 进行调试，但更建议使用虚拟机进行测试。微软官网和 github 官网都提供虚拟机下载，并且需要虚拟机软件 VirtualBox 来安装。

2. 移动端浏览器调试：可采用真实手机、参考友盟数据购买测试机、云测试或虚拟机测试。

移动端浏览器的调试方法较为多样。一般可以采用真实的手机进行调试，但由于不可能购买所有类型的手机，我们可以参考友盟官网数据统计来购买测试机，或者进行云测试，如 https://www.testin.cn。此外，还可以采用虚拟机测试，比如最快的安卓模拟器 genymotion，其网址为 http://www.genymotion.net/，该软件基于 VirtualBox。

2. 兼容性调试的通用方法

1. css hack：查询多种浏览器的 hack 写法。

推荐网站 http://browserhacks.com/，在这里可以查询到多种浏览器的 hack 写法，以解决不同浏览器之间的兼容性问题。

2. respond（js 库）：ie8 以下不支持 css3 媒体查询时可使用。

推荐网址 https://github.com/scottjehl/Respond，由于 ie8 以下不支持 css3 的媒体查询，respond 作为一种 polyfill 应用广泛。当遇到 ie8 以下浏览器的兼容性问题时，可以引入 respond.js 库来解决。

3. html5shiv（js 库）：让 ie8 以下版本的 IE 浏览器支持新增标签。

推荐网址 https://github.com/aFarkas/html5shiv，在 ie8 以下版本的 IE 浏览器不支持新增标签的情况下，通过引入 html5shiv，可以使这些浏览器支持新增标签。具体方法可以通过条件表达式引入，如 <![if lt IE9]><script src="bower_components/html5shiv/dist/html5shiv.js"></script><![endif]-->。

4. modernizr（js 库）：检测浏览器对 css3 的支持情况，添加对应类。

推荐网址 http://modernizr.com，引入该 js 库后，它会检测浏览器对 css3 的支持情况。如果支持，会对元素添加对应的类；反之，增加以 no - 开头的类。这是一种防御性编程思想，可以根据浏览器的兼容性情况全面考虑属性样式。

3. 使用工具进行调试

1. browsersync：省时的浏览器同步测试工具，可同时在多设备下调试，提高工作效率。

Browsersync 是一款省时的浏览器同步测试工具，它能让浏览器实时、快速响应文件的修改并自动刷新页面。无论是 PC、平板还是手机等设备，都可以同时进行调试。

安装方法：首先安装 Node.js，因为 Browsersync 是一个 Node.js 模块。然后通过 npm 将从 Browsersync 仓库中安装 Browsersync，在命令行窗口执行 npm install -g browser-sync，将其安装到全局环境中，这样就可以在任何项目中直接使用。

启动方法：如果是静态网站，只有.html 文件，那么使用服务器模式即可。在项目目录下执行 browser-sync start --server --files "css/*.css"，Browsersync 将启动一个微型服务器并提供一个 URL 来查看站点。如果是动态网站，已经使用 PHP 或类似工具在本地启动了一个服务器，那么使用代理模式，执行 browser-sync start --proxy "myproject.dev" --files "css/*.css"。

Browsersync 的优势在于，当我们在不同设备上打开需要调试的页面后，任何一次代码保存，所有设备都会同时显示改动。无论前端工程师还是后端工程师，使用它将提高 30% 的工作效率。

五、网站设计师的应对策略 

1. 设计过程中的兼容性意识

在网站设计过程中，设计师应始终保持兼容性意识，充分考虑不同浏览器和操作系统的适配问题。这意味着要确保网站在各类浏览器上正常显示和使用，无论是主流的 Chrome、Firefox、Safari，还是可能仍被部分用户使用的较老版本浏览器。只有这样，才能为用户提供一致的优质体验。

2. 正确使用 HTML 和 CSS

严格按照标准规范编写 HTML 和 CSS 代码是确保网站兼容性的关键。避免使用过时特性和浏览器私有前缀等可能影响兼容性的技术，以减少兼容性问题的出现。合理的代码不仅能提高网站的稳定性，还能提升用户体验，同时也有利于搜索引擎对网站的抓取和索引。

3. 采用响应式设计

响应式设计是适应不同屏幕尺寸设备的有效手段。通过自动调整布局，网站能够为用户提供更好的体验。设计师应根据不同设备的特点，精心设计网页排版、字号和图像尺寸，确保在各种设备上都能呈现出良好的效果。同时，合理设计导航条，方便用户操作，提高用户满意度。

4. 借助开发工具和测试工具

开发工具和测试工具能够帮助设计师快速定位和解决兼容性问题。例如，使用 browsersync 可以进行省时的浏览器同步测试，同时在多设备下调试，提高工作效率。此外，还可以利用 css hack、respond、html5shiv 和 modernizr 等 js 库来解决不同浏览器之间的兼容性问题。通过严格的跨浏览器和跨平台测试，确保网站在主流浏览器和操作系统上都能正常运行，消除兼容性问题，为用户提供更好的体验。