Rumah > Artikel > hujung hadapan web > iphone6等移动端的css自适应

iphone6等移动端的css自适应

巴扎黑asal: 2016-12-06 11:11:561157semak imbas

关键是
842adfd073ed4550d179342ef205232f

<!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)+&#39;px&#39;;
};
//AbortifbrowserdoesnotsupportaddEventListener
if(!doc.addEventListener)return;
win.addEventListener(resizeEvt,recalc,false);
doc.addEventListener(&#39;DOMContentLoaded&#39;,recalc,false);
})(document,window);
</script>
<body>
hello
</body>
</html>

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：js函数声明转换为函数表达式的另外一种方法Artikel seterusnya：利用fecha进行JS日期处理

Artikel berkaitan

Lihat lagi