移动端实现1物理像素

rem适配 下的1物理像素实现

(function(){
	//获取设备的像素比	
	var dpr = window.devicePixelRatio||1;
	
	var styleNode = document.creatElement('style');
	//	让布局视口的宽度按像素比的大小先变大或变小；
	var w = document.documentElement.clientWidth*dpr/16 ;
	styleNode.innerHtml = 'html{fontsize:'+w+'px;}';
	document.head.appendChild(styleNode);

	var scale = 1/dpr;
	var meta = document.querySelector('meta');
	//通过initial-scale把整体页面进行缩小或放大；
	meta.content='initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scable=no';
})()

通过css实现1物理像素

因为设备的像素比的值大多数时2和3，
所以我们可以通过媒体查询的方式分别真的像素比2和像素比3的设备
进行不同的transform样式设置；

<style>
	@media only screen and (-webkit-device-pixel-ratio:2) {
		#line {
			transform: scaleY(.5);
		}
	}
	@media only screen and (-webkit-device-pixel-ratio:3) {
		#line {
			transform: scaleY(.3333333);
		}
	}
</style>