08/24
2015
今天完成了一个手机站专题的排版，然后到手机上测试缩放的时候出了问题，折腾半个上午，摸索出一些心得（后来发现，这就是固定宽度布局嘛）。
1.排版的时候用px排，在css里把body宽度固定，可以定成和设计稿一样，例如360px，640px。其他元素也都用px。
2.使用js动态设置viewport：
var scale=document.documentElement.clientWidth/640;
// var scale=window.screen.width/640;
var metaEl = document.createElement('meta');
document.querySelector("head").appendChild(metaEl);
metaEl.setAttribute('name','viewport');
metaEl.setAttribute('content', 'width=device-width ,initial-scale=' + scale + ',maximum-scale=1.0, minimum-scale=0 ,user-scalable=no');
这里面的640改成自己给body定的的宽度。这个代码的意思就是把initial-scale倍数设置为浏览器device-width/网页固定的宽度，使得页面被缩放到适应屏幕宽度。
ps：本文最近做过更新，第二步动态设置viewport，虽然理论上是正确的，但我还没实践过。我现在尝试用rem布局。
