网上关于移动端web适配的问题已经有很多很好的文章了，做一个简单的整理。
常用viewport属性
1、width
常用设置width=device-width，视口宽度等于屏幕宽度
2、initial-scale、maximum-scale、minimum-scale
常用设置initial-scale=1, maximum-scale=1, minimum-scale=1，初始化缩放、最大缩放、最小缩放都为1；或根据屏幕dpr动态计算缩放比例。
3、user-scalable
常用设置为user-scalable=no，不允许用户缩放。
4、target-densitydpi
常用设置target-densitydpi=device-dpi，资料显示部分浏览器已经废弃。
常用方案
1、宽度使用百分比，高度自适应
viewport 配置 width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no。
比较适合列表排列和一些布局比较简单的情况，列表图片可能需要在服务端进行统一处理，遇到需要设置的高度时候，可能需要动态计算。
案例:腾讯新闻移动端。
2、使用rem，dpr默认为1
viewport配置width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no。html标签设置dpr为1、根据屏幕尺寸动态计算html标签font-size。
页面布局相对灵活，图片高度可以设置rem，不依赖服务端处理。如果整体布局全部使用rem，各种手机展示效果基本一致，包括每行文字显示个数。
案例:网易新闻移动端。
3、使用rem，根据devicePixelRatio设置dpr。
viewport配置initial-scale=1/dpr, maximum-scale=1/dpr, minimum-scale=1/dpr, user-scalable=no。html标签设置dpr为window.devicePixelRatio、根据屏幕尺寸动态计算html标签font-size。
本方案和方案2类似，不过对高清屏进行了相应的处理。字体用px需要进行dpr的适配处理，解决了1px显示问题。
案例：淘宝移动端
4、使用target-densitydpi
viewport配置width=640, user-scalable=no, target-densitydpi=device-dpi。
和方案1效果类似。
案例：荔枝FM移动端
最后记录一个使用rem的小问题，图片使用rem设置等宽高，并设置border-radius为50%时，部分浏览器出现头像不是圆形的问题，应该是rem转换为px带有浏览器不支持的小数点导致的。
参考文章:
网易和淘宝移动WEB适配方案再分析
使用Flexible实现手淘H5页面的终端适配
移动端适配方案(下)
viewports剖析