'use strict';
/**
* @param {Number} [baseFontSize = 100] - 基础fontSize, 默认100px;
* @param {Number} [fontscale = 1] - 有的业务希望能放大一定比例的字体;
*/
const win = window;
const _baseFontSize = 150;
const _fontscale = 1; const doc = win.document;
const ua = navigator.userAgent;
const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
let dpr = win.devicePixelRatio || 1;
if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
// 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
dpr = 1;
}
const scale = 1 / dpr; let metaEl = doc.querySelector('meta[name="viewport"]');
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
doc.head.appendChild(metaEl);
}
metaEl.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' +
scale +',maximum-scale=' + scale + ',minimum-scale=' + scale);
doc.documentElement.style.fontSize = `${_baseFontSize / 2 * dpr * _fontscale}px`;

在html插入这段代码,然后在样式文件使用base字体为75px的基准转换px到rem即可。必要时还可以通过vh,vw调整。

https://www.jianshu.com/p/e96ccb603a50

移动端根据dpr适配的更多相关文章

  1. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  2. 基于REM的移动端响应式适配方案

    视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...

  3. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  4. 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

    基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...

  5. 移动端使用rem适配及相关问题

    移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...

  6. 移动端高清适配方案(解决图片模糊问题、1px细线问题)

    本文介绍了移动端适配的3种方法,以及移动端图片模糊问题和1px细线问题的解决方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. >> ...

  7. 使用vw做移动端页面的适配

    Flexible到今天也有几年的历史了,解救了很多同学针对于H5页面布局的适配问题.而这套方案也相对而言是一个较为成熟的方案.简单的回忆一下,当初为了能让页面更好的适配各种不同的终端,通过Hack手段 ...

  8. 移动端1px线适配问题-------适配各种编译CSS工具 stylus sass styled-componet实现方法

    其实在stylus与sass中实现移动端1像素线各个手机设备的适配问题的原理是一样的, 首先我还是先介绍一下原理和所依赖的方法 原理:其实他们都是通过css3的媒体查询来实现的 步骤思路: 1.给目标 ...

  9. 移动端1px的适配问题

    先看个概念: window.devicePixelRatio = 物理像素 / dips(独立像素) window.devicePixelRatio是设备的物理像素和独立像素的比例,可以叫设备像素比. ...

随机推荐

  1. JAVA锁有哪些种类,以及区别(转)

    在读很多并发文章中,会提及各种各样锁如公平锁,乐观锁等等,这篇文章介绍各种锁的分类.介绍的内容如下: 公平锁/非公平锁 可重入锁 独享锁/共享锁 互斥锁/读写锁 乐观锁/悲观锁 分段锁 偏向锁/轻量级 ...

  2. vue父组件给子组件传值:属性的形式

    1.父组件怎么传值 2.子组件怎么接受值:依赖props 父页面定义的参数接收返回值,到子组件依旧用定义好的参数,在定义参数的类型,然后渲染数据

  3. vue路由详解

    自己看vue文档,难免有些地方不懂,自己整理一下,主要是vue-router具体实现的操作步骤. 安装 直接下载/CDN https://unpkg.com/vue-router/dist/vue-r ...

  4. quill富文本编辑器 API

    //1. 从第三个开始删除,删除4个 // console.log(this.quill.deleteText(2, 4)); // 12345678 1278 // 2.(返回对象)返回从第三个开始 ...

  5. 如何在Idea提交代码到Github上

    一,配置账户 1. Setting >> Version Control >> git,配置git的安装目录(一般默认识别),其他参数不变 2.配置GitHub账户,输入Git ...

  6. PID算法(c 语言)(转)

    PID算法(c 语言)(来自老外) #include <stdio.h> #include<math.h> //定义PID 的结构体 struct _pid { int pv; ...

  7. semaphore demo !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1

    import 'dart:async'; import 'package:semaphore/semaphore.dart'; import 'dart:io'; import 'dart:conve ...

  8. LOJ #10070 最小生成树计数

    一道mst-- 最开始是毫无头绪,于是就点开了--->题解 大部分题解都是矩阵树--然而第一篇题解告诉了我们暴搜也能过( 思路大概是说,对于一个图\(G\),它的所有最小生成树的相同权值的边的数 ...

  9. 湖南省队集训 Day 2

    从这里开始 Problem A 走路 Problem B 游戏 Problem C 有趣的字符串题 暴力分又没骗满sad..... Problem A 走路 $O(n^2)$动态规划是显然的. 更新方 ...

  10. Java基础学习-常量和变量

    1.常量概述     -在程序执行的过程中,其值不可以发生改变的量. 2.常量的分类     -字符串常量    用双引号括起来的内容("HelloWorld")     -整数常 ...