移动端根据dpr适配
'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适配的更多相关文章
- 移动端页面开发适配 rem布局原理
主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...
- 基于REM的移动端响应式适配方案
视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...
- 教你如何用 lib-flexible 实现移动端H5页面适配
前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
- 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范
基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...
- 移动端使用rem适配及相关问题
移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...
- 移动端高清适配方案(解决图片模糊问题、1px细线问题)
本文介绍了移动端适配的3种方法,以及移动端图片模糊问题和1px细线问题的解决方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. >> ...
- 使用vw做移动端页面的适配
Flexible到今天也有几年的历史了,解救了很多同学针对于H5页面布局的适配问题.而这套方案也相对而言是一个较为成熟的方案.简单的回忆一下,当初为了能让页面更好的适配各种不同的终端,通过Hack手段 ...
- 移动端1px线适配问题-------适配各种编译CSS工具 stylus sass styled-componet实现方法
其实在stylus与sass中实现移动端1像素线各个手机设备的适配问题的原理是一样的, 首先我还是先介绍一下原理和所依赖的方法 原理:其实他们都是通过css3的媒体查询来实现的 步骤思路: 1.给目标 ...
- 移动端1px的适配问题
先看个概念: window.devicePixelRatio = 物理像素 / dips(独立像素) window.devicePixelRatio是设备的物理像素和独立像素的比例,可以叫设备像素比. ...
随机推荐
- NOIP2015题解
D1T1模拟 #include<bits/stdc++.h> #define re(i,l,r) for(int i=(l);i<=(r);i++) using namespace ...
- centos6.5 MySQL数据库的安装
<div id="home"><div id="header"> <div id="blogTitle"> ...
- js中,转义字符的表示
HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用.这些符号是不显示在我们最终看到的网页里的,那如果我们希望在网页中显示这些符号, ...
- Yii1操作phpexcel
Yii::import('application.vendors.phpexcel.*'); Yii::import('application.vendors.phpexcel.PHPExcel.*' ...
- 原生js移除或添加样式
样式效果如下,点击商品详情 添加样式active 代码 <!doctype html> <html lang="en"> <head> < ...
- java中Map集合的常用方法 (转)
原文地址:https://www.cnblogs.com/xiaostudy/p/9510763.html Map集合和Collection集合的区别 Map集合是有Key和Value的,Collec ...
- 使用java程序对oracle添加触发器时,报错:索引中丢失 IN 或 OUT 参数:: 1
解决方法: 执行sql语句时,使用java.sql.Statement代替java.sql.PreparedStatement. java.sql.PreparedStatement ps = con ...
- Java中的各种bean对应的意义(VO,PO,BO,QO, DAO,POJO,DTO)
VO(value object) 值对象 通常用于业务层之间的数据传递,用 new 关键字创建,由 GC 回收的,和 PO 一样也是仅仅包含数据而已.但应是抽象出的业务对象 , 可以和表对应 , 也可 ...
- python实现列表去重的方法
>>> l=[,,,,,,] >>> list(set(l)) [, , , ] >>>
- Git 安装和使用Tips
1. git的安装 2. git的常见用法 3. git的常见问题 1. git的安装 1)首先去下载https://git-scm.com/downloads 在上述官网上下载符合自己操作系统的gi ...