移动端rem适配js

// 默认375，750设计稿请将375替换为750

(function (doc, win) {

	// 移动端适配

	var docEl = doc.documentElement,

		isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),

		dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,

		dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放

		dpr = 1,

		scale = 1 / dpr,

		resizeEvt = "orientationchange" in window ? "orientationchange" : "resize";

	docEl.dataset.dpr = dpr;

	var metaEl = doc.createElement("meta");

	metaEl.name = "viewport";

	metaEl.content = "initial-scale=" + scale + ",maximum-scale=" + scale + ", minimum-scale=" + scale;

	docEl.firstElementChild.appendChild(metaEl);

	var recalc = function () {

		var width = docEl.clientWidth;

		if (width / dpr > 375) {

			width = 375 * dpr;

		}

		// 乘以100，px : rem = 100 : 1

		docEl.style.fontSize = 100 * (width / 375) + "px";

	};

	recalc();

	if (!doc.addEventListener) return;

	win.addEventListener(resizeEvt, recalc, false);

})(document, window);

html兼容样式

<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="utf-8" />

		<meta http-equiv="X-UA-Compatible" content="IE=edge" />

		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,minimal-ui,viewport-fit=cover" />

		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="apple-mobile-web-app-status-bar-style" content="black" />

		<meta name="apple-mobile-web-app-capable" content="yes" />

		<meta name="format-detection" content="telephone=no" />

		<meta name="apple-touch-fullscreen" content="yes" />

		<meta name="format-detection" content="email=no" />

		<meta name="screen-orientation" content="portrait" />

		<meta name="x5-orientation" content="portrait" />

		<meta name="x5-fullscreen" content="true" />

		<meta name="full-screen" content="yes" />

		<meta name="renderer" content="webkit" />

		<title>Title</title>

	</head>

	<body>

		<div id="app"></div>

	</body>

</html>

CSS样式

建议在 body 中设置全局默认字体大小

移动端rem适配&iOS兼容的更多相关文章

  1. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  2. 07. 如何实现移动端rem适配

    如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. H5 端 rem 适配方案与 viewport 适配

    H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...

  4. 移动端rem适配屏幕

    九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多 ...

  5. 自动改变html font-size，实现移动端rem适配

    移动端采用rem适配非常方便 比如在iphone6尺寸下,将html font-size 设置为 100px,那么写css时,只要将尺寸/100 + rem 即可. 在iphone6Plus尺寸下,h ...

  6. H5移动端rem适配

    /** * 移动端自适应 */ <meta name="viewport" content="width=device-width,user-scalable=no ...

  7. 关于移动端rem适配

    var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...

  8. js动态计算移动端rem适配问题

    第一:css3的media query来实现适配,例如下面这样: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...

  9. 移动端 rem适配方法

    rem适配 一, 网易适配方法         屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50)         document.documentElement. ...

随机推荐

  1. My背包九讲——01背包

    文章目录 背包问题中的常用变量说明 题目 解题思路 我想要想理解最简单 01背包就是要`理解

  2. 如何让Java应用成为杀不死的小强？（上篇）

    各位坐稳扶好,我们要开车了.不过在开车之前,我们还是例行回顾一下上期分享的要点. 项庄舞剑意在沛公,而咱们上期主要借助应用服务器 Resin 的源码,体验了一次 JMX 的真实应用.鉴于 9012 年 ...

  3. CPU、内存、硬盘、指令之间的关系

    我们都知道所有的程序最终都是一系列计算机能够识别的指令和数据,通过执行这些指令来控制整个计算机. 而CPU就是负责读取和解释执行这些指令的,CPU主要包括运算器.控制器和寄存器,控制器负责把指令.数据 ...

  4. python-nmap 使用基础

    前言 python-nmap是一个Python库,可帮助您使用nmap端口扫描程序.它可以轻松操纵nmap扫描结果,将是一个完美的选择想要自动执行扫描任务的系统管理员的工具和报告. 它还支持nmap脚 ...

  5. ListView + ArrayAdapter + 接口回调

    众所周知,ListView是安卓最为频繁使用的控件,但是,随着人们审美观的提高,一些初级的ListView已经满足不了需求了,于是,我们必须为自己定制一套专属的ListView,这就需要用到适配器,A ...

  6. webpack踩坑 无法解析jquery及webpack-cli

    最近在学习Vue,使用到webpack的时候,出现了错误,可能是3和4的版本问题 webpack-dev-server 安装好webpack-dev-server后,需要在package.json 的 ...

  7. networkx学习与攻击转移图可视化

    接到一个任务,将攻击转移矩阵进行可视化,生成攻击转移概率图,便尝试用python实现一下. 查阅资料,看大家都在用networkx和matplotlib进行可视化,便边学边做,记录一下学习笔记. 任务 ...

  8. 广告行业中那些趣事系列9：一网打尽Youtube深度学习推荐系统

    最新最全的文章请关注我的微信公众号:数据拾光者. 摘要:本篇主要分析Youtube深度学习推荐系统,借鉴模型框架以及工程中优秀的解决方案从而应用于实际项目.首先讲了下用户.广告主和抖音这一类视频平台三 ...

  9. 从python爬虫以及数据可视化的角度来为大家呈现“227事件”后，肖战粉丝的数据图

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取t.cn ...

  10. Oracle使用fy_recover_data恢复truncate删除的数据

    (一)truncate操作概述 在生产中,truncate是使用的多的命令,在使用不当的情况下,往往会造成表的数据全部丢失,恢复较为困难.对于truncate恢复,常见的有以下几种方法可以进行恢复: ...