1. PPI pixel density
Speaking of the screen is inseparable from two factors, screen size and screen resolution.
PPI is an abbreviation Pixels Per Inch, pixels per inch is represented by the number of pixels per inch owned (pixel).
The higher the PPI, the better the phone screen. Before the old phone's display is very poor, grainy, because PPI is too low.
With advances in technology, the phone screen PPI increased year by year, when the PPI reaches a certain value, the human eye can not tell the grainy.
For example:
the PPI is the iPhone screen. 6: 326
the PPI is the iPhone screen 6SP: 401
2. DIP device independent pixels
Device independent pixels, referred to as DIP or DP is a physical unit of measure, based on the coordinate system and abstract of pixels (virtual pixels) computer-controlled, the program used by the underlying system, is converted to the application of physical pixels.
Personal understanding: With the development of technology, the screen resolution increased dramatically. But the screen size upgrade is limited. For example iPhone4, compared to the previous generation iPhone3Gs resolution of 320 * 540, iphone4 in the case of the same screen size will increase to 640 * 960 resolution, which means doubling the PPI. According to the traditional logic layout, font 12px iPhone3Gs each row can be put 320 / 26.66 = 12 words, but each row can be put iphone4 640/12 = 53.33. Then the question arises, is also a 3.5-inch screen, iPhone3Gs line of stuffed under 26 characters, iphone4 line under the plug 53 characters, the result is iphone4 the word is very small, hard to see, according to this logic, if the screen resolution then the rate of increase, each character occupies space on the screen even smaller, so more visible. So when the page layout can not press the physical resolution of the display, which has been independent pixel device concept. Proportional to the size of the device-independent pixels and the phone screen, css ensure that each pixel screen space occupied by the same size
Obtain device independent pixels: window.screen.width / height
var p = document.querySelector('p');
var strW = "此设备的屏幕宽度（设备独立像素）为：";
var strH = "此设备的屏幕高度（设备独立像素）为：";
p.innerHTML += (strW + window.screen.width + "<br>");
p.innerHTML += (strH + window.screen.height + "<br>");3. The individual pixels physical pixel value ratio device DPR
Obtaining: window.devicePixelRatio
var str= "此设备物理像素与设备独立像素的比例值为：";
document.write(str + window.devicePixelRatio);PS: the old section of cell phones and computers are basically DPR 1, up from the start iPhone4 DPR to 2, while the latter has been raised to 3 6plus
4. Set the viewport width
Pc page width is large, in order to complete the whole page, page into the mobile browser on the phone a default layout viewport width of 980px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
div{
height: 100px;
margin-top: 50px;
color: white;
line-height: 100px;
text-align: center;
font-size: 30px;
}
div:nth-of-type(1){
width: 414px;
background-color: red;
}
div:nth-of-type(2){
width: 207px;
background-color: blue;
}
</style>
</head>
<body>
<div>414</div>
<div>207</div>
</body>
<script>
</script>
</html>
While in this mode can complete the whole page, but the entire page content is very small, I could not see. You need to set the viewport width of individual pixels of the phone screen size, resolution and each phone is different, so the set value can not be written to die.
Setting the width of the viewport using the meta tag, the viewport is set to the current width of the screen device
<meta name="viewport" content="width=device-width">On iphone6sp (lateral resolution 414), as display
element width 414 is just fill the screen, element width 207 is just half of the screen, if the element width exceeds 414, it will not fit, scroll bars
In order to prevent the user zooms the page, perfect viewport as follows
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />5. Print Browser Information
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设备信息</title>
</head>
<body>
</body>
</html>
<script>
document.write('该设备独立像素为:'+ window.screen.width + '*' + window.screen.height)
document.write('<br />该设备物理像素与设备独立像素的比例值为:' + window.devicePixelRatio)
document.write('<br />浏览器名称:' + navigator.appName)
document.write('<br />浏览器版本:' + navigator.appVersion)
document.write('<br />用户代理:' + navigator.userAgent)
if(window.chrome){
console.log('这是chrome浏览器')
}else if(window.opera){
console.log('这是opera浏览器')
}
</script>