首页 > 移动平台 > 详细

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

时间:2018-10-02 19:50:07      阅读:292      评论:0      收藏:0      [点我收藏+]
(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动态更新

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!