HTML dpr

단지 자신이 이후에 찾기에 편리하도록 하기 위해서일 뿐이니, 알아볼 수 없으니 탓하지 마라
DPI, PPI: 화면 픽셀 밀도 또는 인치당 화면 픽셀 수
dips: 핸드폰 사이즈 또는 독립 픽셀
물리적 픽셀
dpr = window.devicePixelRatio
css 정의
psd 변환rem 단위
rem = px/기준값
기준치 = 휴대폰 폭 * dpr/10
dpr을 곱한 것은 페이지가 축소될 수 있기 때문이다
10을 나누는 것은 정돈하기 위해서이며 계산하기 편리하다. (어떤 값이든지)
다음은 js 설정 메타의 축소와 font-size

var dpr, rem, scale; 
var docEl  = document.documentElement; 
var fontEl = document.createElement('style'); 
var metaEl = document.querySelector('meta[name="viewport"]'); 
dpr = window.devicePixelRatio || 1;
scale = 1 / dpr; 
rem = docEl.clientWidth * dpr / 10; 
//   viewport，    ，       
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ', initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no'); 
//   data-dpr  ，   css hack   
docEl.setAttribute('data-dpr', dpr); 
//        
docEl.firstElementChild.appendChild(fontEl); 
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}'; 
//  js   ，  dpr rem px        
window.rem2px = function(v) { 
	v = parseFloat(v); 
	return v * rem; 
}; 
window.px2rem = function(v) { 
	v = parseFloat(v); 
	return v / rem; 
};
window.dpr = dpr; 
window.rem = rem;