【前端庫】html 移動端適配（meta方法）

阿新 • • 發佈：2018-12-30

案例單擊我

js程式碼

;(function(win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var metaEl = doc.querySelector('meta[name="viewport"]');
    var flexibleEl = doc.querySelector('meta[name="flexible"]');
    var dpr = 0;
    var scale = 0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});

    if 
 (metaEl) {
        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    } else if (flexibleEl) {
        var content = flexibleEl.getAttribute('content');
        if 
 (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
            if 
 (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
        }
    }

    if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下，對於2和3的屏，用2倍的方案，其餘的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他裝置下，仍舊使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }

    docEl.setAttribute('data-dpr', dpr);
    if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === 'complete') {
        doc.body.style.fontSize = 12 * dpr + 'px';
    } else {
        doc.addEventListener('DOMContentLoaded', function(e) {
            doc.body.style.fontSize = 12 * dpr + 'px';
        }, false);
    }


    refreshRem();

    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function(d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    }
    flexible.px2rem = function(d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    }

})(window, window['lib'] || (window['lib'] = {}));

// 直接引入js檔案後

適配方法

必須得在html頁面中使用meta。
必須引入js，最好是在head裡面引入，因為，當頁面載入特別慢得時候，可以讓適配得頁面樣式展示好看點

最大寬度為 10rem。以750得設計圖，就是 750/10 = 75; 那麼設計圖中有寬度為120px得寬度，那麼就是 120px /75 = 1.6rem

此處應該貼上程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="flexible" content="initial-dpr=2" />
    <script src="flexible.js"></script>
    <style type="text/css">
    button {
        -webkit-appearance: none;
        border-radius: 0;
    }
    element::-webkit-scrollbar{
        display: none;
    }
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 4rem;
            height: 1.6rem;
            background: red;
        }
        body {
            background: #eeeeee;
        }
        .wap-box {
            width: 10rem;
            margin: 0 auto;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="wap-box">
        <div class="box">

        </div>
    </div>
    <script type="text/javascript">
        // $("body").css("height",parseInt($(".wrap").height())+parseInt($(".icon-main").height()));
    </script>
</body>
</html>

【前端庫】html 移動端適配（meta方法）

案例單擊我 js程式碼 ;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.quer

【前端庫】HTML 移動端適配（推薦）

案例單擊我上一篇文章我寫了，關於移動端適配問題，傳送門開，這一次也關於移動端適配問題，這個方式比較常用。我經常在公司得專案中使用直接貼上適配程式碼： /* * @Author: a * @D

【移動端適配方案二彈性佈局】Flex彈性佈局+rem實現移動端適配（JS+rem+viewport）

前端開發工程師根據UI設計師給的設計稿進行開發。為了保證在各種螢幕上的不失真，就要根據實際螢幕寬度做等比例換算，才能寫進CSS實現如下：1、設定width=device-width 也就是將layout viewport（佈局視口）的寬度設定為ideal viewport（

html移動端適配方案rem

開發 .cn 大小需要擁有 bsp one 公式計算為了做到一次開發的網頁能夠在不同尺寸的移動端設備上適配，我們需要使設計稿上標註的固定尺寸在不同設備上按照設備大小的比例顯示不同的尺寸。比如設計稿是按照 IPhone6 的 750px 像素設計的，設計稿上的頭部導

移動端適配（2）---viewport適配

float scala screen bsp pen meta log initial width 通過viewport來適配 <script> (function(){ 　　var w=window.screen.width; 　　console.log(w)

移動端適配（3）---rem適配

span meta view strong on() font doc nts cti rem適配 <meta name="viewport" content="width=device-width,user-scalable=no"/> <script

【VUE移動端適配】VUE使用flexible佈局

配置 flexible 安裝 lib-flexible 在命令列中執行如下安裝： npm i lib-flexible --save 引入 lib-flexible 在專案入口檔案 main.js 裡引入 lib-flexible // main.js import 'li

【移動端適配方案一彈性佈局】@media標籤+rem+viewport實現移動端螢幕適配

一、從設計稿說起：採用rem來佈局，其實設計稿是多大都沒有關係，設計稿給480、600或者750都可以，其他尺寸也可以，你就想成它是一張A4紙，然後這些數字只是對這張紙的最大計量單位。反正一張圖就那麼大，無論計量單位是多少，UI設計師能夠在一張A4上給的東西都是一樣的。比如說

前端系列教程之HTML（移動端適配）

說一下自己對移動端適配的一個體會吧，理論就不多說了，咱們重點說方法：移動端適配大致有三種適配方案加上常用的佈局方案三種適配方案：一、百分比適配（%）百分比主要在於主視角的定位和縮放，百分比的取值以原設計稿的尺寸為標準。舉個例子，一個元素在原設計稿裡，量出來距離頂部是 20

【移動端適配】為什麼根元素font-size設定成100px或625%？

rem：是一個相對單位，相對根元素字型大小的單位，再直白點就是相對於html元素字型大小的單位。優點：這樣在計運算元元素有關的尺寸時，只要根據html元素字型大小計算就好。不再像使用em時，得來回的找父元素字型大小頻繁的計算，根本就離不開計算器。首先看下圖：html的字型大小

【前端庫】淘寶適配 rem適配 lib-flexible.js 個人總結

前言上篇文章中使用 rem適配，現在說下大部分都在使用的rem。看完這篇文章移動端頁面開發適配 rem佈局原理，發現我根本就不懂（心想管他了），但是隻要會使用即可，乾貨來了。下載

前端開發知識之前端移動端適配總結

演示等於不同無效這也 sta 一個 name 物理 meta標簽到底做了什麽事情做過移動端適配的小夥伴一定有遇到過這行代碼： <meta name="viewport" content="width=device-width, initial-scale=1

前端讀者 | 移動端適配問題解決方案

本文來自@dduke；地址：https://juejin.im/post/5add7a44f265da0b886d05f8 做為前端開發的程式猿，在開發移動端web應用的時候，對面一堆各色尺寸不一樣的螢幕，就有點淡淡的憂傷。正文從這裡開始 ~ 已上是2018年二月份最新的友盟資料，很明顯

vue-cli3.0結合lib-flexible、px2rem實現移動端適配，完美解決第三方ui庫樣式變小問題 vue-cli 3.0 搭建專案流程

公司最近做的一個移動端專案從搭框架到前端開發由我獨立完成，以前做移動端適配用的媒體查詢，這次想用點別的適配方案，然後就採用了vue-cli3.0結合lib-flexible、px2rem實現移動端適配的方案，開發過程中也遇到一些坑，自己選的方案自己填坑吧。以下記錄我的專案框架搭建及填坑方案。搭建可以參考我