标签：
咳咳. 麦克风测试ok...
那么第一届会议开始 ...
这次会议主题是手机web一些老生常谈的自适应问题。因为每个手机的系统不一样 大小也不一样 每个网页的排版也不一样。这个问题至今都还没有个正确的解 但这是入门手机端网页的必须跨过的一道墙。 那么究竟怎么解决这个问题了 今天我有幸请了6位选手解答 大家可以参考参考
这里我们以640px的设计稿为例 不知道这是什么请问美术gg
请用chrome手机游览器模式 游览选手连接
--------------------------------------------------分割线------------------------------------------------------
1号选手：弹性缩放
http://wx.starnet-social.com/test/dwj/index.html
核心代码：
(function(win,doc){
var re=function(){
var wrap=doc.querySelector(‘#wrap‘);
var s=doc.querySelectorAll(‘.s‘);
var pw = 320; //设计图的宽
var ph = 554; //设计图的高
var tww = win.innerWidth
var twh =win.innerHeight;
var wh = twh*pw/tww; //获取对应比例高
var wsc = tww/pw; //获取比例
var tw = Math.min(0,(pw-tww)*0.5); //center
//先宽自适应
wrap.style.height=wh+‘px‘;
wrap.style.transformOrigin=‘0% 0%‘;
wrap.style.webkitTransformOrigin=‘0% 0%‘;
wrap.style.transform=‘translate3d(‘+tw+‘px, 0px, 0px) scale(‘+wsc+‘)‘;
wrap.style.webkitTransform=‘translate3d(‘+tw+‘px, 0px, 0px) scale(‘+wsc+‘)‘;
var hsc=wh/ph;
wh<ph?hsc=wh/ph:hsc=1;
for(var i=0;i<s.length;i++){
//再高自适应
s[i].style.transform=‘scale(‘+hsc+‘) translateZ(0)‘;
s[i].style.webkitTransform=‘scale(‘+hsc+‘) translateZ(0)‘;
}
}
re();
win.addEventListener(‘resize‘,re,false);
})(window,document);
优点：不管你怎么拉网页大小 自动缩成最佳比例 自适应能力超强 手机电脑都可以看哦
缺点：略微破坏了设计稿的排版比列 但可以和设计师讨论解决如何排版 以至感觉不出来
2号选手: 单位转换
http://wx.starnet-social.com/test/dwj/index2.html
核心代码：
(function(win,doc){
var h;
win.addEventListener(‘resize‘,function() {
clearTimeout(h);
h = setTimeout(setUnitA, 300);
}, false);
win.addEventListener(‘pageshow‘,function(e) {
if (e.persisted) {
clearTimeout(h);
h = setTimeout(setUnitA, 300);
}
}, false);
var setUnitA=function(){
doc.documentElement.style.fontSize = doc.documentElement.clientWidth/16 + ‘px‘;
};
setUnitA();
})(window,document);
优点：和一号选手一样 也拥有弹性能力 但没有通过scale属性变化 实打实的大小
缺点：计算比较麻烦 要理解其中原理rem和px的比例转换。如果想控制dom元素位移比较复杂 (transform属性) 比较难掌握
3号选手：最大化中心缩放
http://wx.starnet-social.com/test/dwj/index3.html
核心代码：
var a = document.documentElement.clientHeight,
s = document.documentElement.clientWidth;
function e(e, n) {
var t, i = s / a,
r = 320 / 504;
t = i > r ? a / 504 : s / 320;
$(e).css({
"-webkit-transform-origin": n,
"transform-origin": n,
"-webkit-transform": "scale(" + t + ");",
transform: "scale(" + t + ");"
});
};
e("#wrap",‘center center‘);
优点：和一号选手也很像 通过scale缩放 最大化中心大小
缺点：没有一号选手 弹性能力那么强 最大化后的中心区域没有完全覆盖手机整个屏幕 但可以通过一些手段 感觉不出来 记得overflow取消掉哦
4号选手：像素化
http://wx.starnet-social.com/test/dwj/index4.html
核心代码：
<meta name="viewport" content="width=640,target-densitydpi=device-dpi,user-scalable=no"/>
优点：像pc端一样写 很暴力 很简单 适合新手 兼容性也不错 也拥有一点点弹性能力 而且属于1比1像素 布局dom元素非常容易。适合功能性页面
缺点：手机端写法不美观 一般必须以<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">写表达手机页面比较好。因为只是以宽等比缩放 部分小手机如4英寸手机 无法看到整个屏幕内容。元素必须控制在高960线内 。真实大小还是1比1 所以dom元素发生位移会比缩放版的消耗更多内存，使用scale效果可能会因为图片大小超过切图大小而失真。不建议动画。
5号选手：像素化-320
http://wx.starnet-social.com/test/dwj/index5.html
核心代码：
document.addEventListener("DOMContentLoaded", function (e) {
var w=e.target.activeElement.clientWidth>=1024?1024:e.target.activeElement.clientWidth;
document.getElementById(‘wrap‘).style.zoom = w / 320;
});
优点：选手4的优化版本 优点和选手4一样。 但因为是320大小 更适合做绚丽的动画
缺点：缩放大小的代码有一定的莫名其妙的bug 而且这种写法也不美观。硬是变成手机端模式。 弹性能力很差 resize后没法继续刷新大小 。也和4一样 部分小手机如4英寸手机 无法看到整个屏幕内容。元素必须控制在高960线内
6号选手： 百分比+media
http://wx.starnet-social.com/test/dwj/index6.html
核心代码：
@media screen and (min-width: 321px) and (max-width: 768px) {
...code
}
优点：最传统的写法 最不容易出错的写法 最符合w3c的写法
缺点：最难的写法 要计算各种百分比 各种手机尺寸 一般还是会采用固定尺寸比较好 属于辅助写法 处理一些其他选手的一些兼容性bug
--------------------------------------------------分割线------------------------------------------------------
由于时间关系 市面上还有很多千奇百怪的写法 那么究竟哪家强呢？
博主基本上喜欢 1 3 4 根据实际情况而变化 。不过 真正做到手机自适应的不是代码而是使用者的本人布局能力 让用户感觉不出来 这才是最好的自适应！
最后我推荐这个h5 不是我做的,某位前端大神做的 但我很喜欢这种自适应。而且布局也不错 连横屏都考虑到了。 下次我也模仿看看哈
http://pao.qq.com/cp/a20150831happy/qq.html
标签：
原文地址：http://www.cnblogs.com/lanbosm/p/5348484.html
