首先需要说明一点，css像素不等同于物理像素，css像素是一个抽象单位，而物理像素是实实在在，大小固定的像素点。
First, do the four pixels mobile terminal need to know
Physical pixels
of physical pixels and the number determined by the actual size of the device itself.Device independent pixel
device according to the independent pixel is also on the equipment, produced on the fixed, independent device iPhone6 pixel is 375 X 667. When you open the browser developer mode, tune into mobile end you can see, it is converted into the final physical pixel pixel css an important medium.CSS pixels
on the concept css pixel browser, not done before fitting, and it is nothing to do with the actual physical size of the half dime, css pixel size is enlarged or reduced with the user changed. Finally converted into a physical pixel on the image forming apparatus.Pixel bitmap
image related to the size of the pixel unit, if a pixel bitmap on just one physical pixel image, then the display time is preferably, if a bitmap pixel to display a plurality of physical pixels will be distorted ( amplification), if the next physical pixel bitmaps fortress plurality of pixels, it will sharpen.
Second, the pixel ratio
Concept: in a physical pixel number direction (X-axis) needed to fill one screen / equipment required number of individual pixels
is good, then to pixel count ratio iPhone6: Physics of the X-axis iPhone6 the number of pixels is 750, and the device individual pixels of the X-axis iPhone6 375, the pixel ratio is 750/375 = 2
If you press the area to not more than the 2
Third, the viewport
移动端是如何将PC端的站点放到屏幕里面显示而不产生横向滚动条的呢？
Layout viewport
layout viewport size of each browser vendor provides a default value that determines page elements or want to change the line, moving end zoom operation does not affect the layout viewports, while the PC-side scaling will affect the layout viewport.
General PC-side page 960 css pixelsVisual viewport
actual area of the visual viewport is actually the screen size, but its size will change, because his unit is CSS pixels when you enlarge the page, you CSS pixel area on the screen becomes larger, screen the number of CSS pixels can appear gradually become less, so the visual viewport size becomes smaller, I do not think this is a fallacy, you can call the API out visual viewport size, while when you zoom a page, while the value decreases. The default end mobile visual viewport is 980CSS pixels , which means you can see the role of the mobile terminal screen the entire page, the visual viewport is in order to wrap the whole page.- The layout of the viewport size to the size of individual pixels apparatus
<meta name="viewport" content="width = device-width"/>Fourth, Zoom
- User scaling
User scaling change is visual viewport, does not change the layout viewport - System scaling
system scaling means arranged initial-scale = xx to zoom in, zoom system will change the visual layout viewport and viewport
V. acquires each viewport width
- Layout viewports
let width = document.documentElement.clientWidth- Visual viewport
let width = window.innerWidthSixth, set the perfect viewport
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,maximum-scale=1">- width = device-width layout viewport size to the pixel size independent device.
- initial-scale = 1 zoom ratio is set to 1, and the visual layout viewport and viewport size to the pixel size independent device.
- Scale = 1 maximum-maximum-Scale = 1 IOS does not support initial-scale, so to set the maximum zoom and minimum zoom.
- user-scalable = 0 prohibits the user zooms
Seven, adaptation
设置完完美视口就会产生一个问题：在不同设备上元素的高宽比不一样，因为不同的设备布局视口大小不一样，iPhone6为375 css单位 ，而iPhone6plus为414css单位，而你的代码写10px时，所占据的屏幕比例是不一样的，所以就需要我们做适配工作。adaptation scheme rem
rem adaptation on the premise that has been set up perfect viewport, the layout viewport has set the width of the device became independent pixel width. Then with the label font-size What percentage size to the size of the layout viewport or layout viewport, such as layout viewports 1/16, then 16rem will occupy the entire screen width, 8rem occupy half the width , they are the same on all devices.- A crudest rem adaptation Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1,maximum-scale=1,user-scalable=0,maximum-scale=1">
<title>菜鸟教程(runoob.com)</title>
<style>
* {
margin: 0;
padding: 0;
}
.re {
width: 180px;
height: 8em;
background: #000;
}
</style>
</head>
<body>
<div class="re"></div>
</body>
<script>
// 将跟标签的字体大小设置为布局视口宽度
var rSize = document.documentElement.clientWidth;
console.log(rSize);
// 获取跟标签
var html = document.querySelector('html');
html.style.fontSize = rSize/16+'px';
// 以上代码会有一个问题：根标签的font-size有可能会被改变
// 所以要加上!important
let style = document.createElement("style")
let rSize = document.documentElement.clientWidth/16
// 16分之1的布局视口大小
style.innerHTML = "html{ font-size: "+ rSize + "px!important }"
document.head.appendChild(style)
</script>
</html>viewport adaptation scheme
ideas viewport adaptation scheme is layout viewport width is set to the width of the design, but the phone is not allowed to directly Andrews layout viewport width, so by setting the initial-scale is changed depending on the value of the layout port size, the size of the value is: individual pixels equipment / pixel bitmap design- A viewport adaptation program codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 先将设备独立像素大小赋值给布局视口值，之后替换掉 -->
<!-- 因为js暂时没法直接读取设备独立像素 -->
<meta name="viewport" content="width=device-width>
<title>菜鸟教程(runoob.com)</title>
<style>
* {
margin: 0;
padding: 0;
}
.re {
width: 180px;
height: 8em;
background: #000;
}
</style>
</head>
<body>
<div class="re"></div>
</body>
<script>
var target = 375;
var scale = document.documentElement.clientWidth/target;
console.log(scale)
var meta = document.querySelector("meta[name='viewport']")
meta.content = "initial-scale="+scale+",maximum-scale="+scale+",user-scalable=0,maximum-scale="+scale
</script>
</html>