咳咳. 麦克风测试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- 321px) and (max- 768px) {
...code
}
优点：最传统的写法 最不容易出错的写法 最符合w3c的写法
缺点：最难的写法 要计算各种百分比 各种手机尺寸 一般还是会采用固定尺寸比较好 属于辅助写法 处理一些其他选手的一些兼容性bug
--------------------------------------------------分割线------------------------------------------------------
由于时间关系 市面上还有很多千奇百怪的写法 那么究竟哪家强呢？
博主基本上喜欢 1 3 4 根据实际情况而变化 。不过 真正做到手机自适应的不是代码而是使用者的本人布局能力 让用户感觉不出来 这才是最好的自适应！
最后我推荐这个h5 不是我做的,某位前端大神做的 但我很喜欢这种自适应。而且布局也不错 连横屏都考虑到了。 下次我也模仿看看哈