移动端网页布局探索（1）

3g.163.com.js

      (function (doc, win) {
        var docEl = doc.documentElement,
          isIOS = navigator.userAgent.match(/iphone|ipod|ipad/gi),
          dpr = isIOS? Math.min(win.devicePixelRatio, 3) : 1,
          dpr = window.top === window.self? dpr : 1, //被iframe引用时，禁止缩放
          dpr = 1, // 首页引用IFRAME，强制为1
          scale = 1 / dpr,
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        docEl.dataset.dpr = win.devicePixelRatio;
        if(navigator.userAgent.match(/iphone/gi) && screen.width == 375 && win.devicePixelRatio == 2){
          docEl.classList.add('iphone6')
        }
        if(navigator.userAgent.match(/iphone/gi) && screen.width == 414 && win.devicePixelRatio == 3){
          docEl.classList.add('iphone6p')
        }
        var metaEl = doc.createElement('meta');
        metaEl.name = 'viewport';
        metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
        docEl.firstElementChild.appendChild(metaEl);
        var recalc = function () {
            var width = docEl.clientWidth;
            if (width / dpr > 640) {
                width = 640 * dpr;
            }
            docEl.style.fontSize = 100 * (width / 640) + 'px';
          };
        recalc()
        if (!doc.addEventListener) return;
        // win.addEventListener(resizeEvt, recalc, false);
      })(document, window);
    

readme.md

移动端下布局探索之 REM 篇；

可米酷的移动端布局和163-3g的布局 都是基于 js 动态设置 font-size 的值进行自适应布局。 第三种是基于css的 media query。

m.comicool.cn.js

function caclFontSize() {
	var screenWid = document.documentElement.offsetWidth;	//测试window.screen.availWidth,window.screen.width在各平台、各浏览器有差异，故舍弃
	var deviceSizeRatio = window.devicePixelRatio;
	var fixWid = 320;	//设置页面宽度基准值
	var htmlFontSize = (screenWid / fixWid) * 20;	//字体大小比例，20为页面html样式字体大小
	document.documentElement.style.fontSize = htmlFontSize + 'px';
}

m.mi.com.css

@media only screen and (max-width: 300px) {
    body {
        font-size:8.33333px
    }

    .viewport {
        max-width: 300px
    }
}

@media only screen and (max-width: 310px) and (min-width:300px) {
    body {
        font-size:8.33333px
    }

    .viewport {
        max-width: 310px
    }
}

@media only screen and (max-width: 320px) and (min-width:310px) {
    body {
        font-size:8.61111px
    }

    .viewport {
        max-width: 320px
    }
}

@media only screen and (max-width: 350px) and (min-width:320px) {
    body {
        font-size:8.88889px
    }

    .viewport {
        max-width: 350px
    }
}

@media only screen and (max-width: 360px) and (min-width:350px) {
    body {
        font-size:9.72222px
    }

    .viewport {
        max-width: 360px
    }
}

@media only screen and (max-width: 400px) and (min-width:360px) {
    body {
        font-size:10px
    }

    .viewport {
        max-width: 400px
    }
}

@media only screen and (max-width: 470px) and (min-width:400px) {
    body {
        font-size:11.11111px
    }

    .viewport {
        max-width: 470px
    }
}

@media only screen and (max-width: 480px) and (min-width:470px) {
    body {
        font-size:13.05556px
    }

    .viewport {
        max-width: 480px
    }
}

@media only screen and (max-width: 540px) and (min-width:480px) {
    body {
        font-size:13.33333px
    }

    .viewport {
        max-width: 540px
    }
}

@media only screen and (max-width: 560px) and (min-width:540px) {
    body {
        font-size:15px
    }

    .viewport {
        max-width: 560px
    }
}

@media only screen and (max-width: 570px) and (min-width:560px) {
    body {
        font-size:15.55556px
    }

    .viewport {
        max-width: 570px
    }
}

@media only screen and (max-width: 630px) and (min-width:570px) {
    body {
        font-size:15.83333px
    }

    .viewport {
        max-width: 630px
    }
}

@media only screen and (max-width: 640px) and (min-width:630px) {
    body {
        font-size:17.5px
    }

    .viewport {
        max-width: 640px
    }
}

@media only screen and (max-width: 710px) and (min-width:640px) {
    body {
        font-size:17.77778px
    }

    .viewport {
        max-width: 710px
    }
}

@media only screen and (max-width: 720px) and (min-width:710px) {
    body {
        font-size:19.72222px
    }

    .viewport {
        max-width: 720px
    }
}

@media only screen and (min-width: 720px) {
    body {
        font-size:20px
    }

    .viewport {
        width: 720px
    }
}

news.163.com.js

@media only screen and (max-width: 479px) {
    .ns-font {
        font-size:50px
    }
}
@media only screen and (min-width: 360px) and (max-width:479px) {
    .ns-font {
        font-size:58px
    }
}
@media only screen and (min-width: 480px) and (max-width:639px) {
    .ns-font {
        font-size:75px
    }
}
@media only screen and (min-width: 640px) {
    .ns-font {
        font-size:100px
    }
    .ns-area {
        width: 600px
    }
}