参照《达摩院》手机端，总结移动布局

总结：

达摩院的移动端页面：采用750标准,采用rem代替px, 计算公式：当前像素 = 实际像素/75 , 保留小数点8位长度

HTML 基础：

<head>
  <meta charset="utf-8">
  <title>达摩院</title>
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="375">
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="cleartype" content="on">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="">
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
</head>

 

CSS基础：

<script type="text/javascript">
    var win = window, 
      doc = document,  
      isMobile = !!navigator.userAgent.match(/mobile/i) || "orientation" in win ,
      supportTouch = "ontouchstart"in window,
      env = {
            isPC: !isMobile,
            isMobile: isMobile,
            support3D: "WebKitCSSMatrix"in window && "m11"in new window.WebKitCSSMatrix,
            supportHairline: function() {
                var support = !1;
                if (win.devicePixelRatio && devicePixelRatio >= 2) {
                    var testElem = doc.createElement("div");
                    testElem.style.border = ".5px solid transparent",
                    doc.body.appendChild(testElem),
                    testElem.offsetHeight >= 1 && (support = !0),
                    doc.body.removeChild(testElem)
                }
                return support
            }()
        };

    !function(docEl, fontEl) {
        var obj, key, value, dpr = win.devicePixelRatio || 1, matches = navigator.userAgent.match(/Android[\S\s]+AppleWebkit\/?(\d{3})/i);
        matches && matches[1] <= 534 && (dpr = 1),
        win.dpr = dpr,
        docEl.getAttribute("data-dpr") || (doc.documentElement.className = (0, value = dpr > 1
          //,(key = "dpr" + dpr) in obj ? Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0}) : obj[key] = value, obj)
          ), 
          docEl.setAttribute("data-dpr", dpr), 
          docEl.firstElementChild.appendChild(fontEl));
      
        var setRem = function() {
            var docWidth = docEl.clientWidth;
            win.rem = docWidth / 10,
            /ZTE U930_TD/.test(navigator.userAgent) && (win.rem *= 1.13),
            fontEl.innerHTML = "html{font-size:" + win.rem + "px!important}"
        };
        win.addEventListener("resize", function() {
            setRem()
        }, !1),
        win.addEventListener("pageshow", function(e) {
            e.persisted && setRem()
        }, !1),
        setRem()
    }(doc.documentElement, doc.createElement("style"));
    var rem = function(px, artBoardWidth) {
        return 10 * px / (artBoardWidth || 750) + "rem"
    }
  </script>

　　

posted @ 2018-10-10 14:41  心无引擎,眼无流派  阅读(316)  评论(0)    收藏  举报