手機端自適應(yīng)

• meta - 放在head標(biāo)簽里

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

• dpr - 放在head的結(jié)束標(biāo)簽之前（個人不建議使用烈涮，我著實沒發(fā)現(xiàn)它有什么卵用）

<script>
    (function () {
        var viewport = document.querySelector('meta[name=viewport]');
        var dpr = window.devicePixelRatio;
        var scale = 1 / dpr;
        var content = 'width=device-width,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale;
        document.querySelector('html').setAttribute('data-dpr', dpr);
        viewport.setAttribute('content', content);
    })();
</script>

• rem - 放在class為g-wrap的開始標(biāo)簽之后客燕，這里的g-wrap你可以看成是body標(biāo)簽

<script>
    (function (win, doc) {
        function isPc() {
            var userAgentInfo = navigator.userAgent;
            var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
            var flag = true;
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    flag = false;
                    break;
                }
            }
            return flag;
        }

        function resize() {
            var html = doc.querySelector('html');
            var wrap = doc.querySelector('.g-wrap');
            if (isPc()) {
                html.classList.add('.g-pc');
            } else {
                html.classList.remove('.g-pc');
            }
            html.style.fontSize = wrap.offsetWidth / 10 + 'px';
        }

        resize();
        win.addEventListener('resize', resize);
    }(window, document));
</script>

吐槽dpr

• 我著實不知道這個dpr加上縮放有什么卵用生蚁，還會增加一些不必要的負擔(dān)暴匠，例如商詳頁的商品描述一般都是別的地方轉(zhuǎn)過來的數(shù)據(jù)，里面的數(shù)據(jù)自帶標(biāo)簽還有字體大小單位是px蘸朋，經(jīng)過dpr縮放幾倍之后捉片，看起來會很小，還有通過dpr進行放大艺骂，惡不惡心诸老。圖片倒是還好，加個最大 寬度10rem就醒了（這里的10是個人分割的钳恕，根據(jù)你自己的分割情況而定别伏，為什么用10rem蹄衷，不用100%，因為有些div標(biāo)簽自帶寬度很寬很寬厘肮，超過了最大寬度愧口，你100%就失去了意義，只有10rem可以解決）
• 說高清吧类茂，確實會高清耍属，但是也是在沒有給圖片加rem的情況下，例如iphone4巩检，設(shè)備屏幕物理像素是640x940px厚骗，css像素是320x480px，dpr是2碴巾，我設(shè)置了dpr縮放0.5倍之后溯捆，body的寬度變成了640和設(shè)備的物理像素一致了，一張css像素為375px的圖片厦瓢，看起來確實更清晰一些提揍，但是這種高清有個卵用？圖片不能自適應(yīng)了煮仇，如果我想讓用戶傳最大為750px的圖劳跃，那用戶傳的375px是不是就是5rem，當(dāng)我給圖片設(shè)置5rem的寬度浙垫，圖片展示起來又不是高清了刨仑，那我要dpr有個卵用？
• 這里的dpr我個人是沒有加的,在此僅作為記錄夹姥，萬一有什么奧妙是我沒有參悟透徹的呢杉武，還請有誰知道這個dpr有什么卵用的高級玩家大發(fā)善心幫我詳細解釋一下，最好是驗證過的辙售，因為我沒驗證出來到底有什么卵用轻抱。
• 我最后的最后又驗證了下使用背景，發(fā)現(xiàn)同樣清晰旦部，最后又重新驗證了一下圖片祈搜，發(fā)現(xiàn)還是清晰，我個人得出的結(jié)論是dpr沒什么卵用士八。dpr沒什么卵用容燕。dpr沒什么卵用。
• 最后的最后再最后婚度，我發(fā)現(xiàn)清晰和圖片的縮放比例有關(guān)蘸秘，因為即使我使用了dpr，調(diào)小圖片的寬度，它依然會有時清晰有時不清晰秘血，可能也和谷歌瀏覽器的渲染機制有關(guān)吧味抖，因為我是用谷歌瀏覽器模擬測試的评甜。
• 最最最最最最最最后灰粮，我又用小米mix2測試了一下，發(fā)現(xiàn)加或者不加dpr都是清晰的忍坷，懶得繼續(xù)測試了粘舟，就這樣吧，不了了之吧佩研。
• 最最最最最最最最最最最后柑肴，還是想吐槽一句，dpr沒卵用旬薯。