zoukankan      html  css  js  c++  java
  • 手机淘宝flexible布局探索及最终方案

    相关文章

    http://blog.csdn.net/junreycen/article/details/51261653

    http://www.html-js.com/article/2402

    https://segmentfault.com/a/1190000004403496

    https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html?utm_source=tuicool&utm_medium=referral


    关于width=device和initial-scale

    layout-viewport的宽度就是文档元素HTML的宽度,用docEl.getBoundingClientRect().width计算
    浏览器的宽度是基于layout-viewport的宽度比例来的(看网页缩放的情况),由window.innerwidth计算(或者用idea viewport根据缩放比例来算)

    width=device作用是让layout-viewport和浏览器宽度保持一致

    当不设置width=device时:

    1.不设置initial-scale,不设置maximum-scale=x minimum-scale=x,则layout-viewport默认为980px,但是安卓会自动缩放网页使得浏览器宽度和layout宽度一致,此时浏览器宽度也为980px,ios也会自动缩放网页,但是缩放结果依然是大于浏览器宽度

    2.不设置initial-scale, 但用maximum-scale=1 minimum-scale=1禁止自动缩放,此时网页无缩放,layout为980px ,浏览器窗口宽度计算结果为idea viewport的宽度。

    3.不设置initial-scale,但用maximum-scale=x minimum-scale=x x不等于1 来缩放网页,安卓端,当x<=1/dpr,浏览器宽度和layout-viewport永远为980px ios端当浏览器宽度计算结果>=980px时,layout-viewport会自动变为和浏览器宽度一致。其余情况安卓和ios,layout-viewport为980px

    4.设置initial-scale后(maximum-scale=x minimum-scale=x 设置与否,无所谓)
    ,ios端layout-viewport就会默认和浏览器宽度一致(以idea viewport为基础计算),安卓端 当initial-scale=1时layout-viewport就会和浏览器宽度一致,当initial-scale不等1时,还是和情况3一样
    (其实安卓端设置maximum-scale=x minimum-scale=x和设置initial-scale是一回事,都是按照idea viewport为基础缩放网页,iso端设置initial-scale后,layout-viewport就会默认和浏览器宽度一致,并且以idea viewport为基础计算)

    当设置width=device时,

    1.不设置initial-scale,不设置maximum-scale=x minimum-scale=x,安卓端,layout viewport=idea viewport,浏览器宽度=idea viewport。ios端 ,网页会放大,layout viewport=idea viewport,浏览器宽度小于idea viewport。

    2.不设置initial-scale,设置maximum-scale=1 minimum-scale=1,安卓端和ios端一致,layout viewport=idea viewport,浏览器宽度=idea viewport

    3,不设置initial-scale,设置maximum-scale=x minimum-scale=x,当x<1时,安卓端和ios端一致,layout viewport=浏览器宽度(用idea viewport根据缩放比例来算),当x>1时,安卓端和ios端一致,layout viewport=idea viewport,浏览器宽度小于layout宽度。

    4.设置initial-scale,不设置maximum-scale=x minimum-scale=x,当initial-scale>=1时,安卓端和ios端一致,layout viewport=idea viewport,浏览器宽度=idea viewport
    ,当1>initial-scale>1/dpr时,安卓端,layout viewport=浏览器宽度(用idea viewport根据缩放比例来算),ios端,layout viewport用idea viewport根据缩放比例来算,浏览器宽度大于或者小于layout宽度。当initial-scale<=1/dpr,安卓端,layout viewport用idea viewport根据缩放比例来算,浏览器宽度小于layout宽度。ios端layout viewport=浏览器宽度(用idea viewport根据缩放比例来算

    5.设置initial-scale,设置maximum-scale=x minimum-scale=x,当initial-scale=1,x=1时,安卓端和ios端一致,layout viewport=idea viewport,浏览器宽度=idea viewport
    当initial-scale=x<1 时,安卓端和ios端一致layout viewport=浏览器宽度(用idea viewport根据缩放比例来算),当initial-scale=x>1 时layout viewport=idea viewport,浏览器宽度小于idea viewport。

    总结:淘宝flexible 采用的方案是,不设置width=device,设置initial-scale=x,maximum-scale=x minimum-scale=x,并且安卓端x=1,ios端x<=3;

    rem缩放布局js (在需要添加缩放标签的地方添加一下代码),注意用rem值得行高撑起盒子可能会出现一些高度不正常的现象,解决办法就是height和line-height都写出来
    <script>
    /*采用flexible方案布局*/
    var rem;
    var setDpr,scale;
    var docEle=document.documentElement;
    var browserInfo=window.navigator.userAgent;
    var dpr=window.devicePixelRatio;
    var isIphone=/iphone/i.test(browserInfo);
    var isIOS9_3=isIphone && /OS 9_3/.test(browserInfo);
    setDpr = isIphone && !isIOS9_3 ? dpr>= 3 ? 3 : dpr >= 2 ? 2 : 1 : 1;
    scale=1/setDpr;
    metaEle=document.createElement("meta");
    metaEle.name="viewport";
    metaEle.content="initial-scale="+scale+" maximum-scale="+ scale + " minimum-scale="+ scale + " user-scalable=no";
    if(docEle.firstElementChild){
    docEle.firstElementChild.appendChild(metaEle);
    }else {
    var wrap = document.createElement('div');
    wrap.appendChild(metaEle);
    document.write(wrap.innerHTML);
    }
    function refreshRem() {
    var width=docEle.getBoundingClientRect().width;
    width=(width/setDpr>540) ? 540*setDpr : width;
    rem=width/10;
    docEle.style.fontSize=rem+"px";
    docEle.setAttribute('data-dpr', setDpr);
    }
    refreshRem();
    </script>

  • 相关阅读:
    开始学习编写用于 Windows SideShow 设备的小工具【转】
    Windows Mobile 6.5 Developer Tool Kit 下载
    Microsoft Security Essentials 微软免费杀毒软件下载
    SQL Server 2008 空间数据存储摘抄(SRID 点 MultiPoint LineString MultiLineString 多边形 MultiPolygon GeometryCollection)
    Vista Sidebar Gadget (侧边栏小工具)开发教程 (2)
    Vista Sidebar Gadget (侧边栏小工具)开发教程 (4)
    负载测试、压力测试和性能测试的异同
    Windows Server 2008 Vista Sidebar Gadget (侧边栏小工具) 入门开发实例
    Silverlight Tools 安装失败 解决办法
    SQL Server 2008 空间数据库 空间索引概念及创建(取自帮助)
  • 原文地址:https://www.cnblogs.com/mei123/p/8467192.html
Copyright © 2011-2022 走看看