移动端1物理像素的实现

一、移动端需要处理1物理像素的原因

  原因是像素比,在设置了完美视口之后,像素比=物理像素/设备独立像素=物理像素/CSS逻辑像素,从而推导出:物理像素=像素比*CSS逻辑像素;例如,DPR为2的iphone6S,设置高度为1px(CSS逻辑像素),所以占用的物理个数=2*1px=2px,即是说高度为1px的CSS像素在DPR为2的移动设备上,占用了2个物理像素。

二、initial-scale处理方式

   按照第一点说到的情况,相当于像素比把CSS像素放大了DRP倍,既然是放大了CSS像素,反过来,我们可以通过initial-scale来进行缩小操作。

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6     <title>1px物理像素</title>
 7     <style media="screen">
 8       *{
 9         margin: 0;
10         padding: 0;
11       }
12       #div1{
13                 width: 16rem;
14                 height: 1px;
15                 margin-top: 3rem;
16         background: blue;
17       }
18     </style>
19   </head>
20   <body>
21     <div id="div1"></div>
22         <script>
23             (function(){
24                 let dpr = window.devicePixelRatio || 1;
25                 let scale = 1 / dpr;
26 
27                 // rem 适配
28                 let w = document.documentElement.clientWidth / 16 * dpr;
29                 let styleNode = document.createElement(style);
30                 styleNode.innerHTML = "html{font-size:" + w + "px !important;}"
31                 document.head.appendChild(styleNode);
32                 
33                 // 缩小操作
34                 metaDOM = document.querySelector("meta[name=‘viewport‘]");
35                 metaDOM.content = "width=device-width,initial-scale=" + scale + ",user-scalable=no,minimum-scale=" + scale + ",maximum-scale=" + scale;
36             })();
37         </script>
38   </body>
39 </html>

三、媒体查询&&transform处理方式

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6     <title>1px物理像素</title>
 7     <style media="screen">
 8       *{
 9         margin: 0;
10         padding: 0;
11       }
12       #div1{
13                 width: 16rem;
14                 height: 1px;
15                 margin-top: 3rem;
16         background: blue;
17       }
18             @media only screen and (-webkit-device-pixel-ratio: 2){
19                 #div1{
20                     transform: scaleY(0.5);
21                 }
22             }
23             @media only screen and (-webkit-device-pixel-ratio: 3){
24                 #div1{
25                     transform: scaleY(0.333333333);
26                 }
27             }
28     </style>
29   </head>
30   <body>
31     <div id="div1"></div>
32         <script>
33             (function(){
34                 // rem 适配
35                 let w = document.documentElement.clientWidth / 16;
36                 let styleNode = document.createElement(style);
37                 styleNode.innerHTML = "html{font-size:" + w + "px !important;}"
38                 document.head.appendChild(styleNode);
39             })();
40         </script>
41   </body>
42 </html>

 

移动端1物理像素的实现

上一篇:Redis设置键的过期时间


下一篇:iOS基础(一)——属性篇