## 实验
```html
<!DOCTYPE html>
<html style="font-size: 100px;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,viewport-fit=cover"> -->
<title>test</title>
<style>
body {
margin: 0;
font-size: 15px;
}
.clearfix:after,
.clearfix:before {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.d1,
.d2,
.d3,
.d4 {
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
float: left;
margin-bottom: 10px;
}
.d1.rem,
.d2.rem,
.d3.rem,
.d4.rem {
width: 0.9rem;
height: 0.9rem;
line-height: 0.9rem;
text-align: center;
float: left;
font-size: 0.15rem;
}
.d1 {
background: #E03636;
}
.d2 {
background: #EDD0BE;
}
.d3 {
background: #FF534D;
}
.d4 {
background: #25C6FC;
}
.d1.rem {
background: #FF3399;
}
.d2.rem {
background: #FFCC99;
}
.d3.rem {
background: #FF6666;
}
.d4.rem {
background: #e32cff;
}
.rem-box {
width: 3.6rem;
height: 3.6rem;
background: #51d3ff;
font-size: 0.25rem;
}
.btn {
margin: 0.2rem;
width: 200px;
height: 50px;
line-height: 50px;
color: #323232;
text-align: center;
border: 1px #202020 solid;
border-radius: 5px;
background: #f8f8f8;
font-size: 15px;
}
.btn._px {
border-width: 0.5px;
}
.btn.rem {
width: 2rem;
height: 0.5rem;
line-height: 0.5rem;
border-width: 0.01rem;
font-size: 0.15rem;
}
.btn.rem._px {
border-width: 0.005rem;
}
.info {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.66);
color: #fff;
font-size: 12px;
padding: 10px;
}
.btn-g {
position: fixed;
right: 0;
top: 1rem;
width: 0.3rem;
font-size: 0;
padding: 0.05rem;
background: rgba(0, 0, 0, 0.37);
padding-bottom: 0;
}
.btn-g button {
width: 0.3rem;
height: 0.3rem;
background: #f2f2f2;
color: #333;
border: 0.01rem black solid;
font-size: 0.16rem;
margin-bottom: 0.1rem;
line-height: 0.3rem;
border-radius: 0.05rem;
outline: none;
}
.btn-g button:active {
background: #ff4040;
}
.btn-g span {
width: 0.3rem;
height: 0.3rem;
background: #fff;
color: black;
text-align: center;
line-height: 0.3rem;
font-size: 0.15rem;
display: inline-block;
margin-bottom: 0.1rem;
margin-top: 0.05rem;
}
.isRetina {
background: #9C27B0;
color: #fff;
padding: 0.02rem 0.05rem;
display: none;
border-radius: 2px;
font-size: 0.12rem;
margin-left: 0.1rem;
}
</style>
</head>
<body>
<div class="d1">90px</div>
<div class="d2">90px</div>
<div class="d3">90px</div>
<div class="d4">90px</div>
<div class="clearfix"></div>
<div class="d1 rem">0.9rem</div>
<div class="d2 rem">0.9rem</div>
<div class="d3 rem">0.9rem</div>
<div class="d4 rem">0.9rem</div>
<div class="clearfix"></div>
<div class="btn">1px</div>
<div class="btn _px">0.5px</div>
<div class="btn rem">0.01rem</div>
<div class="btn rem _px">0.005rem</div>
<div class="rem-box">3.6rem</div>
<div class="info">
<p>window.screen.width: <span class="screen"></span></p>
<p>window.innerWidth: <span class="innerWidth"></span></p>
<p>html.clientWidth：<span class="clientWidth"></span></p>
<p>html.getBoundingClientRect().width：<span class="getBoundingClientRect"></span></p>
<p>window.dpr: <span class="dpr"></span><span class="isRetina">高清屏</span></p>
<p>viewport：<span class="viewport"></span></p>
</div>
<div class="btn-g">
<span class="value">1</span>
<button class="add">+</button>
<button class="reduce">-</button>
</div>
<script>
var init = function() {
var htmlSize = function() {
// 以360px的设备独立像素为标准
var Z = 3.6;
// 以750的设计稿为标准
// var Z = 7.5;
// 以375的设备独立像素，750的设计稿为标准（iPhone 6 dpr:2）
// var Z = 3.75;
// Z定什么值都可以，只要始终以一个标准换算就可以，一般取一个能使基准值为100就好了，这样设计稿换算到代码rem时方便一些
var html = document.querySelector('html');
// var P = window.innerWidth;
// var P = document.documentElement.clientWidth;
var P = document.documentElement.getBoundingClientRect().width;
html.style.fontSize = P / Z + 'px';
}
viewport = document.querySelector("meta[name=viewport]");
var resize = function() {
var screen = document.querySelector('.screen');
screen.innerHTML = window.screen.width;
var innerWidth = document.querySelector('.innerWidth');
innerWidth.innerHTML = window.innerWidth;
var dpr = document.querySelector('.dpr');
dpr.innerHTML = window.devicePixelRatio;
var getBoundingClientRect = document.querySelector('.getBoundingClientRect');
getBoundingClientRect.innerHTML = document.documentElement.getBoundingClientRect().width;
var clientWidth = document.querySelector('.clientWidth');
clientWidth.innerHTML = document.documentElement.clientWidth;
document.documentElement.setAttribute("data-dpr", window.devicePixelRatio);
// 高清屏标记
if (window.devicePixelRatio >= 2) {
var fakeBody = document.createElement('body');
var testElement = document.createElement('div');
testElement.style.border = '.5px solid transparent';
fakeBody.appendChild(testElement);
document.documentElement.appendChild(fakeBody);
if (testElement.offsetHeight === 1) {
document.documentElement.classList.add('hairlines');
}
document.documentElement.removeChild(fakeBody);
document.querySelector('.isRetina').style.display = 'inline-block';
} else {
document.documentElement.classList.remove('hairlines');
document.querySelector('.isRetina').style.display = 'none';
}
htmlSize();
}
window.addEventListener('resize', resize);
window.addEventListener('pageshow', resize);
resize();
// 使其更可靠
// setInterval(resize, 1000);
var scale = function(x) {
var x = x || 1;
// 创建meta元素
if (viewport == null) {
var metaEl = document.createElement('meta');
var scale = x;
// var scale = isRetina ? 0.5 : 1;
metaEl.setAttribute('name', 'viewport');
// 注意这里，设置视口缩放时没有设置 width=device-width
metaEl.setAttribute('content', 'width=device-width,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no,viewport-fit=cover');
if (document.documentElement.firstElementChild) {
document.documentElement.firstElementChild.appendChild(metaEl);
} else {
var wrap = document.createElement('div');
wrap.appendChild(metaEl);
documen.write(wrap.innerHTML);
}
} else {
viewport.content = 'width=device-width,user-scalable=no,initial-scale=' + x + ',maximum-scale=' + x + ',minimum-scale=' + x + ',viewport-fit=cover';
}
var _viewport = viewport || metaEl;
console.log(_viewport.content);
var v = document.querySelector('.viewport');
v.innerHTML = _viewport.content;
// 缩放后设备独立像素改变了，那么是否需要重新计算基准值呢
// 其实设备独立像素改变了屏幕的resize事件就会被触发了（width和scale同时设置的话就不会触发这个事件了）
// resize();
if (_viewport.content.indexOf('width') != -1) {
resize();
}
}
scale();
// scale(2); // 放大页面，设备独立像素缩小一倍
// scale(0.5); // 缩小页面，设备独立像素放大一倍（淘宝用这种方式解决）
/* 增加减小按钮事件：修改viewport缩放值 */
var value = document.querySelector('.value');
var add = document.querySelector('.add');
var reduce = document.querySelector('.reduce');
var addF = function() {
var x = parseFloat(value.innerHTML) + 0.25;
value.innerHTML = x;
scale(x);
}
var reduceF = function() {
var x = parseFloat(value.innerHTML) - 0.25;
if (x <= 0.25) {
x = 0.25;
}
value.innerHTML = x;
scale(x);
}
if ((/Mobile/i).test(window.navigator.userAgent)) {
add.addEventListener('touchstart', addF);
reduce.addEventListener('touchstart', reduceF);
} else {
add.addEventListener('click', addF);
reduce.addEventListener('click', reduceF);
}
}
init();
// setTimeout(init, 1000);
</script>
</body>
</html>
```
* * * * *
### 扩展
[The Ultimate Guide To iPhone Resolutions](https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions)
[前端：viewport-fit解决iphoneX的“刘海”问题 - Clancey - 博客园](https://www.cnblogs.com/WQLong/p/7778368.html)
```
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
```
[关于H5页面在iPhoneX适配 - lolDragon - 博客园](https://www.cnblogs.com/lolDragon/p/7795174.html)
* * * * *
last update：2018-7-21 00:18:56
- 开始
- 微信小程序
- 获取用户信息
- 记录
- HTML
- HTML5
- 文档根节点
- 你真的了解script标签吗？
- 文档结构
- 已经落后的技术
- form表单
- html实体
- CSS
- css优先级 & 设计模式
- 如何编写高效的 CSS 选择符
- 笔记
- 小计
- flex布局
- 细节体验
- Flex
- Grid
- tailwindcss
- JavaScript
- javascript物语
- js函数定义
- js中的数组对象
- js的json解析
- js中数组的操作
- js事件冒泡
- js中的判断
- js语句声明会提前
- cookie操作
- 关于javascript你要知道的
- 关于innerHTML的试验
- js引擎与GUI引擎是互斥的
- 如何安全的修改对象
- 当渲染引擎遇上强迫症
- 不要使用连相等
- 修改数组-对象
- 算法-函数
- 事件探析
- 事件循环
- js事件循环中的上下文和作用域的经典问题
- Promise
- 最佳实践
- 页面遮罩加载效果
- 网站静态文件之思考
- 图片加载问题
- 路由及转场解决方案
- web app
- 写一个页面路由转场的管理工具
- 谈编程
- 技术/思想的斗争
- 前端技术选型分析
- 我想放点html模板代码
- 开发自适应网页
- 后台前端项目的开发
- 网站PC版和移动版的模板方案
- 前后端分离
- 淘宝前后端分离
- 前后端分离的思考与实践（一）
- 前后端分离的思考与实践（二）
- 前后端分离的思考与实践（三）
- 前后端分离的思考与实践（四）
- 前后端分离的思考与实践（五）
- 前后端分离的思考与实践（六）
- 动画
- 开发小技巧
- Axios
- 屏幕适配
- 理论基础
- 思考
- flexible.js原理
- 实验
- rem的坑，为什么要设置成百分比，为什么又是62.5%
- 为什么以一个标准适配的，其它宽度也能同等适配
- 自适应、响应式、弹性布局、屏幕适配
- 适配：都用百分比？
- 番外篇
- 给你看看0.5px长什么样？
- 用事实证明viewport scale缩放不会改变rem元素的大小
- 为什么PC端页面缩放不会影响rem元素
- 究竟以哪个为设备独立像素
- PC到移动端初试
- 深入理解px
- 响应式之栅格系统
- 深入理解px（二）
- 一篇搞定移动端适配
- flex版栅格布局
- 其他
- 浏览器加载初探
- 警惕你的开发工具
- JS模块化
- webpack
- 打包原理
- 异步加载
- gulp
- 命名规范
- 接口开发
- sea.js学习
- require.js学习
- react学习
- react笔记
- vue学习
- vue3
- 工具、技巧
- 临时笔记
- 怎么维护好开源项目
- 待办
- 对前端MVV*C框架的思考
- jquery问题
- 临时
- 好文
- 节流防抖