1 物理像素css
需求: border: 1px solid red; 在移動端 dpr 爲 2 的屏幕上,其實是 2 物理像素。 如何實現 1 物理像素?html
首先,確定不能 border: 0.5px solid red;瀏覽器
由於 有些 PC 不支持小數 px,或者瀏覽器會將小數 px 取整,即變成 1pxapp
(function(){ var width = document.documentElement.clientWidth; // 屏幕寬度 375 var dpr = window.devicePixelRatio; // 獲取 dpr var scale = 1/dpr; // 獲取實現 1 像素的比例 0.5 // 經過系統縮放 initial-scale=0.5 var metaNode = document.querySelector('meta[name="viewport"]'); metaNode.setAttribute('content','width=device-width,initial-scale='+ scale +',user-scalable=no') // 此時獲取佈局視口爲 750px width = document.documentElement.clientWidth; // 頁面中佈局元素 * 2 var styleNode = document.createElement('style'); styleNode.innerHTML = 'html{font-size: '+ width/16 +'px !important;}'; document.head.appendChild(styleNode); }());