移动端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. reuire代码优化之：r.js

    r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器的文件请求.要使用 ...

  2. C++编译/编辑器对OIer的必要功能

    (没有引战的意思,如果有不同意见可以评论区发言,只是写出我目前的情况) 作为一个C++ OIer肯定是用过Dev的,因为学校推荐啊我也没有办法.都知道Dev又丑又没有代码补全,但是却是最最最适合OIe ...

  3. JDBCUtils,根据当前MySQL数据库下面的表生成java实体类

    自己简单写的JDBCUtils,可以根据当前数据库下面的表生成java实体类,代码萌新,请多多包涵. 初始化配置: //驱动程序名//不固定,根据驱动 static String driver = & ...

  4. BadMethodCallException : Call to undefined method App\Models\Article::setContainer()

    如果你执行 php artisan db:seed 发生如下错误 说是模型中不存在 静态方法 setContainer()方法,那么你应该检查下你的DatabaseSeeder.php 文件 中的 r ...

  5. Springboot2(二)通过微信熟悉熟悉Spring-boot yml配置文件

    前言:Spring-boot的yml配置文件,这里就不在借助人.狗介绍了,试试套下微信! 创建yml文件 值得注意的是下图中有三种命名方法,前两种是对的,且第二种必须是横线而不是下划线! yml文件的 ...

  6. 3.K均值算法

    一.概念 K-means中心思想:事先确定常数K,常数K意味着最终的聚类类别数,首先随机选定初始点为质心,并通过计算每一个样本与质心之间的相似度(这里为欧式距离),将样本点归到最相似的类中,接着,重新 ...

  7. 第一章 AT&T

    1.一个公司(企业)越庞大,就越危险:越复杂,就越濒临坍塌:快速发展的同时,也埋下了隐患. 2.再庞大的企业也不可能永久站立,下个十年谁也说不准谁会在浪潮之巅. 3.一个人能走多远,往往取决于他能看多 ...

  8. Linux c++ vim环境搭建系列（2）——Ubuntu18.04.4编译安装llvm clang

    2. 源码编译安装llvm clang 参考网址: https://llvhttps

  9. 宏定义#define和内联函数inline的区别

    1 宏定义在预编译的时候进行字符串替换.内联函数在编译的时候进行函数展开. 2 宏定义没有类型检查.内联函数会进行参数列表.返回值等类型检查.

  10. char类型及ASCII码之间比较

    在JAVA中,char类型可以直接运算,char在ASCII等字符编码表中有对应的数值对char类型字符运行时,直接当做ASCII表对应的整数来对待 参考 https://blog.csdn.net/ ...