第一期 花式自适应网页哪家强？ 就选你啦

咳咳. 麦克风测试ok...

那么第一届会议开始 ...

这次会议主题是手机web一些老生常谈的自适应问题。因为每个手机的系统不一样 大小也不一样 每个网页的排版也不一样。这个问题至今都还没有个正确的解 但这是入门手机端网页的必须跨过的一道墙。 那么究竟怎么解决这个问题了 今天我有幸请了7位选手解答 大家可以参考参考

这里我们以640px的设计稿为例 不知道这是什么请问美术gg

请用chrome手机游览器模式 游览选手连接

--------------------------------------------------分割线------------------------------------------------------

1号选手：弹性缩放

http://demo.tolotolo.cn/fit/index.html

 核心代码：(function(win,doc){

　var re=function(){
　　var wrap=doc.querySelector('#wrap');
　   var s=doc.querySelectorAll('.s');
　　var pw = 750; //设计图的宽
　　var ph = 1136; //设计图的宽
　　var tww = win.innerWidth;
　　var twh =win.innerHeight;


　　//配置比列    
　　var scaleCenter = '0% 0%';

　　var tw= 0;    //适应宽间距
　　var th = 0;    //适应高间距
　　var wsc = 1; //缩放比例额


　　if(pw/tww*twh>=ph){
　　　　if( tww / pw >1){
　　　　　　console.log('超容器适配')
　　　　　　scaleCenter="50% 50%";
　　　　　　wsc = tww / pw;
　　　　　　th=Math.max(0, (twh-ph) * 0.5);
　　　　　　tw = Math.max(0, (tww-pw) * 0.5);
　　　　}else{
　　　　　　console.log('宽适配')
　　　　　　scaleCenter="0% 50%";
　　　　　　wsc = tww / pw;
　　　　　　th= ph>twh?Math.min(0, -(ph - twh) * 0.5):Math.max(0, (twh-ph) * 0.5);
　　　　　　tw = 0 //Math.min(0, (pw - tww) * 0.5);
　　　　}
　　}else if(ph/twh*tww>=pw){
　　　　if( twh / ph >1){
　　　　　　console.log('超容器适配')
　　　　　　scaleCenter="50% 50%";
　　　　　　wsc = twh / ph;
　　　　　　th=Math.max(0, (twh-ph) * 0.5);
　　　　　　tw = Math.max(0, (tww-pw) * 0.5);
　　　　}else{
　　　　　　console.log('高适配')
　　　　　　scaleCenter="50% 0%";
　　　　　　wsc = twh / ph; //获取宽比例
　　　　　　th= 0 //Math.min(0, (ph - twh) * 0.5);
　　　　　　tw = pw>tww?Math.min(0, -(pw - tww) * 0.5):Math.max(0, (tww-pw) * 0.5);
　　　　}
　　}else{
　　　　　　　console.log('无法适配');
　　}

　　//应用缩放
　　for(var i=0;i<s.length;i++){

　　　　s[i].style.transformOrigin = scaleCenter;
　　　　s[i].style.webkitTransformOrigin = scaleCenter;
　　　　s[i].style.transform = 'translate3d(0px, 0px, 0px) scale(' + wsc + ')';
　　　　s[i].style.webkitTransform = 'translate3d(0px,0px, 0px) scale(' + wsc + ')';
　　　　s[i].style.marginTop = th + "px"
　　　　s[i].style.marginLeft =tw + "px"
　　}

　}
　re();
　win.addEventListener('resize',re,false);
})(window,document);

 

优点：背景按宽缩放 内容按高缩放 不管你怎么拉网页大小 自动缩成最佳比例 自适应能力超强 手机电脑都可以看哦

缺点：略微破坏了设计稿的排版比列 但可以和设计师讨论解决如何排版 以至感觉不出来

 

2号选手: 单位转换

http://demo.tolotolo.cn/fit/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://demo.tolotolo.cn/fit/index3.html

核心代码：

var a = document.documentElement.clientHeight,
s = document.documentElement.clientWidth;
function e(e, n) {
 var t, i = s / a,
 r = 320 / 504;                             // 750版本  375/667
 t = i > r ? a / 504 : s / 320;　　　　//t = i > r ? a / 667 : s / 375;
 
 $(e).css({
  "-webkit-transform-origin": n,
  "transform-origin": n,
  "-webkit-transform": "scale(" + t + ");",
  transform: "scale(" + t + ");"
 });
};
e("#wrap",'center center');

 优点：和一号选手也很像 通过scale缩放 最大化中心大小

 缺点：没有一号选手 弹性能力那么强  最大化后的中心区域没有完全覆盖手机整个屏幕 但可以通过一些手段 感觉不出来 记得overflow取消掉哦

4号选手：像素化

http://demo.tolotolo.cn/fit/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号选手：像素化 -伪装

http://demo.tolotolo.cn/fit/index5.html

核心代码：

var viewport = document.querySelector("meta[name=viewport]");

var winWidths=$(window).width();
var densityDpi=640/winWidths;
    densityDpi= densityDpi>1?300*640*densityDpi/640:densityDpi;
  
if(winWidths>=640){
    viewport.setAttribute('content', 'width=640, target-densityDpi='+densityDpi +" ,user-scalable=no");
 
}else{
    viewport.setAttribute('content', 'width=640, user-scalable=no');
 
}

 优点：选手4的js版本 优点和选手4一样。 只为了meta标签

 缺点：js控制 可能会从新渲染页面 性能下降一点点

6号选手：像素化-320

http://demo.tolotolo.cn/fit/index6.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线内

7号选手： 百分比+media

http://demo.tolotolo.cn/fit/index7.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