移動屏幕適配

dreamGong 發布于2019-08-21 10:35 / 3451人閱讀

摘要：簡介移動屏幕適配是一個比較令人頭疼的問題，這是我寫的一個通過動態設置的移動屏幕適配的工具函數，包括定寬和兩種適配方法，目前在我自己的項目中用起來還不錯，后續也會優化調整，地址這里。

2015-10-16更新。

簡介

移動屏幕適配是一個比較令人頭疼的問題，這是我寫的一個通過動態設置viewport的移動屏幕適配的工具函數，包括定寬和rem兩種適配方法，目前在我自己的項目中用起來還不錯，后續也會優化調整，github地址這里。

說明

頁面事先添加meta標簽，然后調用方法如fixViewport("fixed", 640)即可。

參數

type
適配類型(可選值為"fixed"或"rem")

width
設計稿寬度(整數)

適配方法

可以選擇以下兩種方式進行屏幕適配：

定寬：
原理：設定viewport的寬度為固定值(即傳遞的width值)，并根據屏幕寬度和width值計算viewport縮放比例。
實際開發在css中任何長度尺寸均使用px單位，大小設置為設計稿中原始尺寸值；
字體單位使用em, body下直接子元素字體大小設置為設計稿中尺寸值 / 100；
非直接子元素若其父元素未設置字體大小則與直接子元素相同，否則根據父元素字體大小計算其相對值。

rem:
原理：根據設備dpr和屏幕寬度來計算viewport寬度，并根據設備dpr計算viewport縮放比例，然后在html標簽中設置font-size的屬性值。
實際開發在css中任何長度尺寸均使用rem單位，大小設置為設計稿中尺寸值 / 100;
字體單位使用em, body下直接子元素字體大小設置為設計稿中尺寸值 / 100；
非直接子元素若其父元素未設置字體大小則與直接子元素相同，否則根據父元素字體大小計算其相對值。
若需要1px物理像素的邊框效果，則border的寬度不需要使用rem，設定為1px即可。

代碼

/**
 * Created by GG on 15/7/29.
 *
 *  頁面事先添加meta標簽 
 *  參數：type(適配類型, 可選值為"fixed"或"rem")；width(設計稿寬度，整數)
 *  可以選擇以下兩種情況適配：
 *  1. 定寬：原理是設定viewport的寬度為固定值(即傳遞的width值)，并根據屏幕寬度和width值計算viewport縮放比例。
 *     實際開發在css中任何長度尺寸均使用px單位，大小設置為設計稿中原始尺寸值；
 *     字體單位使用em, body下直接子元素字體大小設置為設計稿中尺寸值 / 100；
 *     非直接子元素若其父元素未設置字體大小則與直接子元素相同，否則根據父元素字體大小計算其相對值。
 *  2. REM：原理是根據設備dpr和屏幕寬度來計算viewport寬度，并根據設備dpr計算viewport縮放比例，然后在html標簽中設置font-size的屬性值。
 *     實際開發在css中任何長度尺寸均使用rem單位，大小設置為設計稿中尺寸值 / 100;
 *     字體單位使用em, body下直接子元素字體大小設置為設計稿中尺寸值 / 100；
 *     非直接子元素若其父元素未設置字體大小則與直接子元素相同，否則根據父元素字體大小計算其相對值。
 *     若需要1px物理像素的邊框效果，則border的寬度不需要使用rem，設定為1px即可。
 */

(function () {
    function fixViewport(type, designWidth) {
        var metaEl = document.querySelector("meta[name="viewport"]");
        //由于初始設置了viewport的width=device-width,所以此處docEl.clientWidth即是屏幕的設備寬度
        var clientWidth = document.documentElement.clientWidth;
        var width, scale;

        switch (type) {
            case "fixed":
                width = designWidth;
                scale = clientWidth / designWidth;
                break;
            case "rem":
                var dpr = window.devicePixelRatio || 1;
                width = clientWidth * dpr;
                scale = 1 / dpr;
                document.documentElement.style.fontSize = 100 * (clientWidth * dpr / designWidth) + "px";
                break;
        }
        metaEl.setAttribute("content", "width=" + width + ",initial-scale=" + scale + ",maximum-scale=" + scale +
            ",minimum-scale=" + scale);

        //設置body的基準字體大小
        document.body.style.fontSize = 50 / scale + "px";
    }

    fixViewport("rem", 640);
}());

云服務器 GPU云服務器屏幕適配屏幕適配教程 iOS屏幕適配移動適配

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85827.html

【移動適配】移動Web怎么做屏幕適配（一）

摘要：屏幕適配是一個很容易被忽略的問題，但對于精益求精的產品而言，是必不可少的。對于開發的求職者而言，也是一個必需要理解清楚的經典問題文啃先生壹移動端適配的是什么我們討論的是網頁適配多種尺寸屏幕，讓網頁效果看起來和設計師的設計稿一樣。屏幕適配是一個很容易被忽略的問題，但對于精益求精的產品而言，是必不可少的。對于Web開發的求職者而言，也是一個必需要理解清楚的經典問題文 | 啃先生 Mar...

huangjinnan 2019-08-19 17:43 評論0 收藏0
從零搭建移動H5開發項目實戰

摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機制，在端上走的代碼，在端或者微信端上走端對應的代碼。對于一個從零開始的移動端項目，我總結了以上這些移動開發難點，希望之后的人能少踩點坑，站在我的肩膀上提高項目開發的效率和質量。從零搭建移動H5開發項目實戰前端H5的前世今身在Pc的時代，前端技術無疑統治了大多數用戶的交互界面！而在移動為王的今天，NA開發在早期占領了大多...

terro 2019-08-29 11:32 評論0 收藏0
從零搭建移動H5開發項目實戰

摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機制，在端上走的代碼，在端或者微信端上走端對應的代碼。對于一個從零開始的移動端項目，我總結了以上這些移動開發難點，希望之后的人能少踩點坑，站在我的肩膀上提高項目開發的效率和質量。從零搭建移動H5開發項目實戰前端H5的前世今身在Pc的時代，前端技術無疑統治了大多數用戶的交互界面！而在移動為王的今天，NA開發在早期占領了大多...

pepperwang 2019-08-20 12:14 評論0 收藏0
移動 web 端屏幕適配 - rem

摘要：前言最近整理了一下以前學習前端的筆記，發現自己對移動端屏幕適配這一塊并沒有真正理解，只是會用。接下來，把自己的一些對移動端屏幕適配的思考記錄下來。量得的高度為，因為在設計稿這樣尺寸的屏幕中，，所以該的的值為，即。前言最近整理了一下以前學習前端的筆記，發現自己對移動 web 端屏幕適配（rem）這一塊并沒有真正理解，只是會用。接下來，把自己的一些對移動 web 端屏幕適配（rem）的...

Xufc 2019-08-22 18:15 評論0 收藏0
移動 web 端屏幕適配 - rem

摘要：前言最近整理了一下以前學習前端的筆記，發現自己對移動端屏幕適配這一塊并沒有真正理解，只是會用。接下來，把自己的一些對移動端屏幕適配的思考記錄下來。量得的高度為，因為在設計稿這樣尺寸的屏幕中，，所以該的的值為，即。前言最近整理了一下以前學習前端的筆記，發現自己對移動 web 端屏幕適配（rem）這一塊并沒有真正理解，只是會用。接下來，把自己的一些對移動 web 端屏幕適配（rem）的...

RdouTyping 2019-08-02 10:45 評論0 收藏0