移动端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. html 中video标签视频不自动播放的问题

    有个需求,客户想做个打开官网自动播放一段视频,楼主使用了video标签,即下面的代码::于是我在video标签上添加了属性 autoplay=“autoplay” loop=“loop”然而通过地址栏 ...

  2. 获取data 数据

    export function getData(el, name, val) { const prefix = 'data-' if (val) { return el.setAttribute(pr ...

  3. 记python 链式比较的坑

    前两天,python交流群里有人问: “x”<"y"==True 这个表达式输出的是什么,脑子都没动,就觉得应该是True 居然被否定了!立马在命令行里敲了一下,准备用事实打 ...

  4. Java基础知识2-Java基本语法

    数据类型 1.Java程序的基本组成 关键字:被Java语言赋予特定含义的单词,不能作标识符,如private. 标识符:由数字.字母.$和_组成的字符串,用于引用变量.且首字母不能是数字. 变量:程 ...

  5. LeetCode | 289. 生命游戏（原地算法/位运算）

    记录dalao的位运算骚操作 根据百度百科 ,生命游戏,简称为生命,是英国数学家约翰·何顿·康威在 1970 年发明的细胞自动机. 给定一个包含 m × n 个格子的面板,每一个格子都可以看成是一个细 ...

  6. 团队项目-运动App

    一:团队成员介绍 队长:温学智 博客地址:https://www.cnblogs.com/dazhi151/                    技术型大佬,学习能力相对团队来说是最高的.并且作为班 ...

  7. 2017蓝桥杯最大公共子串（C++B组）

    题目: 最大公共子串长度问题就是:求两个串的所有子串中能够匹配上的最大长度是多少.比如:"abcdkkk" 和 "baabcdadabc",可以找到的最长的公共 ...

  8. C语言输出 1到20 的阶乘之和

    除了调用库,绝对找不到比这更精简的代码了. #include<stdio.h> #include<string.h> long long getdata(long long n ...

  9. javascript入门 之 ztree (六 结点的点击和展开/折叠事件)

    1.注意: 测试点击事件时,如果要测试取消选中和追加选中,如果按住ctrl和win键无用,则需要先用鼠标左键按住,然后,在松开左键的前几毫秒按住ctrl键便可! <!DOCTYPE html&g ...

  10. Gradle系列之初识Gradle

    原文首发于微信公众号:躬行之(jzman-blog) 学习 Android 有一段时间了,开发中经常使用到 Gradle ,但是不知道 Gradle 构建项目的原理,计划花一点时间学习一下 Gradl ...