<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi, user-scalable=yes">
然后再JS代码中设置如下代码
var viewport = document.querySelector("meta[name=viewport]")
var winWidths=$(window).width()
var densityDpi=640/winWidths
densityDpi= densityDpi>1?300*640*densityDpi/640:densityDpi
if(isWeixin()){
viewport.setAttribute('content', 'width=640, target-densityDpi='+densityDpi)
}else{
viewport.setAttribute('content', 'width=640, user-scalable=no')
window.setTimeout(function(){
viewport.setAttribute('content', 'width=640, user-scalable=yes')
},1000)
}
function isWeixin(){
var ua = navigator.userAgent.toLowerCase()
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true
} else {
return false
}
}
移动web，顾名思义就是在移动端的web页面，比如我们可以在手机的UC浏览器中访问淘宝等网站：
可以发现淘宝的移动web版本和pc上web版本有很大的不同，在移动web版本中更像是模拟了native应用中的页面。所以移动web的开发和pc上web的开发肯定也是有很大的不同。
先看正常的pc上web页面在移动设备上的展示：
从上图可以看出，正常PC上的网页在移动设备被缩放了，这样对于商城购物类的网站来说，用户体验非常差，所以就更应该要有适配移动设备的页面了。
那么究竟是怎样适配移动端的页面呢？答案就是viewport，可以将viewport理解为浏览器中用来承载网页的那一层。默认情况下移动设备上浏览器会自动将viewport的值设置为980px或者1024px，不过手机的屏幕没有那么大，这时候网页就缩放了。
到这里，web适配移动设备的方案就出来，让viewport=手机的宽度就好了。是的，正常情况下都是这么用的：
在meta标签中设置viewport的宽度为设备的宽度， initial-scale=1 的意思是页面的缩放比例为1， user-scalable=no 的意思是禁止用户缩放页面， minimum-scale=1,maximum-scale=1 的意思是设置用户的最大最小缩放比，当设置了 user-scalable=no 之后这两个属性值就没有意义了。
以上就是viewport的主流设置，不错淘宝（m.taobao.com）就是非主流的设置，淘宝的移动web页面中viewport没有设置宽度：
所以淘宝的viewport的width应该是用js动态获取的。
