移动屏幕适配

dreamGong 发布于2019-08-21 10:35 / 3428人阅读

摘要：简介移动屏幕适配是一个比较令人头疼的问题，这是我写的一个通过动态设置的移动屏幕适配的工具函数，包括定宽和两种适配方法，目前在我自己的项目中用起来还不错，后续也会优化调整，地址这里。

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屏幕适配移动适配

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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