iphone6等移动端的css自适应

最新推荐文章于 2021-11-10 10:36:19 发布

原创最新推荐文章于 2021-11-10 10:36:19 发布 · 544 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #JavaScript #ViewUI

javascript 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种利用CSS媒体查询和JavaScript动态调整页面布局的方法，使得网页能够在不同尺寸和分辨率的设备上良好显示。通过设置视口宽度、字体大小及根据不同设备特性调整HTML根元素的字体大小，实现响应式设计。

参考
[url]http://jingyan.baidu.com/article/e73e26c0b3d36b24acb6a762.html[/url]
关键是
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
</head>
<style type="text/css">
html{font-size:100px;}
body{font-size:0.14rem/*实际相当于14px*/}
@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){
html{font-size:117.1875px;}
}
/*iphone6plus*/
@media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3){
html{font-size:129.375px;}
}
</style>
<script type="text/javascript">
(function(doc,win){
	var docEl=doc.documentElement,
	resizeEvt="onorientationchange" in window ? "orientationchange" : "resize",
	recalc=function(){
			console.log(resizeEvt);
		var clientWidth=docEl.clientWidth;
		if(!clientWidth)return;
		docEl.style.fontSize=100*(clientWidth/320)+'px';
	};
	//AbortifbrowserdoesnotsupportaddEventListener
	if(!doc.addEventListener)return;
	win.addEventListener(resizeEvt,recalc,false);
	doc.addEventListener('DOMContentLoaded',recalc,false);
})(document,window);
</script>
<body>
hello
</body>
</html>