Home >Backend Development >PHP Tutorial >CSS adaptation for mobile terminals such as iphone6

CSS adaptation for mobile terminals such as iphone6

巴扎黑
巴扎黑Original
2016-11-25 11:13:321332browse

The key is
a18220ef6883588839af3f8cd0e30379

<!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>


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn