响应式第5天：独立像素比(DPR)
2017-10-14 本文已影响0人
小豌豆书吧
响应式第5天-响应式手机网站制作
3.1、独立像素比(DPR)
| 屏幕的物理分辨率（最大的渲染像素) | px | 虚拟单位 |
|---|---|---|
| 设备尺寸 | 点（晶体点) | 物理元件 |
独立像素比=屏幕分辨率大小 / 设备尺寸大小；
例子：
| Iphone3GS | 320*480px | 320*480点 | DPR=1 | 1个晶体点只能容纳1px |
|---|---|---|---|---|
| Iphone4 | 640*960px | 320*480点 | DPR=2 | 1个晶体点可以容纳4px |
| Iphone6p | 1242*2280px | 414*736点 | DPR=3 | 1个晶体点可以容纳9px |
总结：
独立像素比越大，设备屏幕越密，屏幕越高清，网页显示越清晰。
这个值是由屏幕本身决定的，不由开发人员设置
获取独立像素比：
window.devicePixelRatio;['pɪksl]['reɪʃɪəʊ]
3.2、**合适的视口大小
将设备的视口大小放大为该设备的物理分辨率，这样就可以百分百的来还原设计师的设计稿。
3.3、利用像素比设置视口大小
（通过动态设置视口标签，100%还原屏幕分辨率）：
（如：iphone4下面，保证html一屏的宽高=640*960px；
如果设置...-scale=0.5，实际上是将页面扩大两倍）
var iScale=1/window.devicePixelRatio;
document.write(...);
详细：
// 重写viewport
document.write(
'<meta name="viewport" content="width=device-width,
user-scalable=no, initial-scale='+ iScale +',
maximum-scale='+ iScale +', minimum-scale='+ iScale +'" />'
);
手机站雏形.png
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <script type="text/javascript">
6 var iScale=1/window.devicePixelRatio;
7 document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale='+iScale+', maximum-scale='+iScale+', minimum-scale='+iScale+'" />');
8 </script>
9 <title>Document</title>
10 <style type="text/css">
11 *{
12 margin:0; padding:0; border:0; list-style:none;
13 }
14 .banner,nav{
15 width: 100%;
16 }
17 .banner{
18 height: 250px;
19 background-color: deeppink;
20 }
21 nav{
22 height: 120px;
23 background-color: deepskyblue;
24 }
25 </style>
26 </head>
27 <body>
28 <div class="banner"></div>
29 <nav></nav>
30 </body>
31 </html>
