移动端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. jmeter执行多条sql语句

    1.JDBC Connection Configuration 在配置DataBase URL的时候,加上allowMultiQueries=true 2.在JDBC Request中设置Quer T ...

  2. JavaScript中数组的两种排序方法详解（冒泡排序和选择排序）

    一.冒泡排序的原理(从小到大) 相邻两个数进行比较,如果前一个数大于后一个数,那么就交换,否则不交换 原理剖析 比如有一组含有6个数字的数:5.3.7.2.1.6一共6个数字,做5次循环,每次循环相邻 ...

  3. 大数据hadoop安装

    hadoop集群搭建--CentOS部署Hadoop服务 在了解了Hadoop的相关知识后,接下来就是Hadoop环境的搭建,搭建Hadoop环境是正式学习大数据的开始,接下来就开始搭建环境!我们用到 ...

  4. udev规则，部署Multipath

    部署Multipath多路径环境 配置iSCSI服务 编写udev规则 配置并访问NFS共享 部署Multipath多路径环境 1 配置iSCSI服务 1.1 问题 本案例要求先搭建好一台iSCSI服 ...

  5. zendframewor 项目构建

    1.安装好新的php 2.安装composer   在https://getcomposer.org/download/上手动下载最新版本的composer.phar   放到/usr/local/b ...

  6. 【物理】AABB物理碰撞检测

    什么是AABB? AABB,指轴对齐包围盒(Axis-aligned bounding boxes).在3D空间中,AABB是一个长方体,在2D空间中是一个长方形.特征是面法线皆平行于坐标轴,即当物体 ...

  7. TCP协议的安全性分析

    有算法就有破解法,因为它们都遵循了一定的数据结构和数学知识.所以网络安全是一个相对的概念,不可能出现绝对的安全!作为当今最流行的网络协议--TCP也是如此.那么TCP的安全问题究竟是哪些因素引起的呢? ...

  8. Web Scraper 高级用法——使用 CouchDB 存储数据 | 简易数据分析 18

    这是简易数据分析系列的第 18 篇文章. 利用 web scraper 抓取数据的时候,大家一定会遇到一个问题:数据是乱序的.在之前的教程里,我建议大家利用 Excel 等工具对数据二次加工排序,但还 ...

  9. 在SpringBoot中使用SpringSecurity

    @ 目录 提出一个需求 解决方案: 使用SpringSecurity进行解决 SpringSecurity和SpringBoot结合 1. 首先在pom.xml中引入依赖: 2. 配置用户角色和接口的 ...

  10. 20175110 王礼博 exp4恶意代码分析

    目录 1.基础知识 2.系统运行监控 3.恶意软件分析 4.基础问题回答 5.实践总结与体会 1. 基础知识 1.1 恶意代码的概念与分类 定义:指故意编制或设置的.对网络或系统会产生威胁或潜在威胁的 ...