码迷,mamicode.com
首页 > 移动开发 > 详细

移动端响应式布局,rem动态更新

时间:2018-10-02 20:42:34      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:csharp   minimum   math   ceil   device   pix   移动   cal   增加   

(function(){
	var fontSizeMatchDeviceWidth = function(){
		var deviceWidth = document.documentElement.clientWidth || window.screen.width || 320,
			devicePixelRatio = window.devicePixelRatio || 1,
			fontSize = (Math.ceil(deviceWidth * 16 / 320)),
			scale = 1 / devicePixelRatio; // 默认的缩放
			
		document.documentElement.style.fontSize = fontSize + ‘px‘;
		document.querySelector(‘meta[name="viewport"]‘).setAttribute(‘content‘,‘width=device-width,initial-scale=‘+‘scale‘+‘,maximum-scale=‘+scale+‘,minimum-scale=‘+scale+‘,user-scalable=no,viewport-fit=cover‘); // 增加viewport-fit=cover适配iphone x
	};
	
	(function(){
		var ua = navigator.userAgent;
		if(/android/i.test(ua) || /ipad|itouch|iphone/i.test(ua)|| /tianqi/i.test(ua)){
			fontSizeMatchDeviceWidth();
		} else { // pc端优雅降级
			document.documentElement.style.fontSize = ‘24px‘;
		}
	})();
})();

  

移动端响应式布局,rem动态更新

标签:csharp   minimum   math   ceil   device   pix   移动   cal   增加   

原文地址:https://www.cnblogs.com/feixiablog/p/9737480.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!