你应该了解的“移动端兼容性”
时间：2014-10-19思路二:通过终端判断分别调取两套资源以适配所有终端
优势：可根据不同端做个性设计及个性化信息推送且可按需加载，如移动端可配合重力感应、不同手势做各种炫酷拽效果，pc页面可不受流量限制做适合pc端的效果。
劣势：需维护两套资源，维护成本增加。
技术选型：zepto(或xui等移动端轻量级框架)+ 响应式 + 前端模块加载器 + css预处理器 + 终端适配。zepto作为jquery的移动端版本，依然延续其自身优势，大幅优化了移动端API且摒弃了兼容”非现代浏览器”的冗余代码，成为移动端轻便可用的js框架代表，对于习惯了jquery的同学来说简直是不二之选!
终端适配目前一般通过ua判断来实现。ua判断可放在服务端也可放在页面中，在代理服务器中做跳转更快、更准确且不走应用程序层，即使浏览器禁用了js依然可以跳转到相应的地址，同时秉承着公共服务放在服务端这样的云端服务理念，我们选择了通过代理服务器做终端适配。
User-Agent嗅探，即Web浏览器发送一个Web页面或资源请求时，会发送一个User-Agent首部作为HTTP请求的一部分，那么我们就可以在服务器端获取想要的信息，进而判断并引导用户到达相应的页面地址。
下面我们通过详细分析一个http请求中的user-agent首部来了解其原理：
要点明晰及注意事项：
css像素与设备像素：二者的区别在于前者是抽象的，用于浏览器渲染页面，而后者是设备的最小物理单位。
视口：移动端浏览器有两个视口，即可见视口与布局视口，二者的区别在于前者为基于移动设备屏幕的实际宽度，而后者为我们为页面定义的用于浏览器渲染的大小。
媒体查询：找准断点。
响应式布局：当上下文环境发生变化时可考虑变化布局来展现优雅。当元素脱离文档流绝对定位时，才是相对高度定义的。
响应式字体：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禁止用户缩放页面。
总结：
移动端开启了一个时代，它不是虚无缥缈或者高不可攀的，它反而让曾经被忽视的渲染方式及web标准等实质性的问题更加清晰，相较上述两种思路，我们更倾向于各司其职思路清晰的第二种方案，我们可根据不同终端做不同的交互设计、视觉设计，研究不同的前端技术、用户体验，适合的才是更好的。做为前端工程师，让我们理解原理，探索实践，跨终端任重而道远。
相关文章
HTML页面跳转及参数传递问题这篇文章给大家详细介绍了HTML页面跳转及参数传递问题，需要的朋友参考下吧
纯css实现照片墙3D效果的示例代码这篇文章主要介绍了纯css实现照片墙3D效果的示例代码，可以实现鼠标经过图片实现改变，具有一定的参考价值，感兴
纯 Css 绘制扇形的方法示例本篇文章主要介绍了纯 Css 绘制扇形的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随
一份纯CSS loading动画效果代码示例本篇文章主要介绍了一份纯CSS loading效果代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟
css 实现文字过长自动隐藏功能这篇文章主要介绍了css 实现文字过长自动隐藏功能,需要的朋友可以参考下
详解CSS3 rem(设置字体大小) 教程本篇文章主要介绍了详解CSS3 rem(设置字体大小) 教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起