05_一物理像素的實現

一物理像素的實現

rem+系統縮放

1.主體適配採用rem適配 並放大rem的基值(dpr倍)
2.再通過系統縮放 縮回dpr倍，initial-scale=1/dpr

(function(){
	var dpr  = window.devicePixelRatio||1;
	var styleNode = document.createElement("style");
	var w = document.documentElement.clientWidth*dpr/16;
	styleNode.innerHTML="html{font-size:"+w+"px!important}";
	document.head.appendChild(styleNode);
	var scale = 1/dpr;
	var meta = document.querySelector("meta[name='viewport']");
	meta.content="width=device-width,initial-scale="+scale;
})()

響應式+變換縮放

@media only screen and (-webkit-device-pixel-ratio:2 ) {
	#test{
		transform: scaleY(.5);
	}
}
@media only screen and (-webkit-device-pixel-ratio:3 ) {
	#test{
		transform: scaleY(.333333333333333333);
	}
}