适配
rem适配
相关代码:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no" />
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
width: 8rem;
height: 8rem;
background:yellowgreen;
}
</style>
</head>
<body>
<div id="box">box</div>
</body>
<script type="text/javascript">
(function(){
var head=document.head;
var width=document.documentElement.clientWidth;
var styleN=document.createElement('style');
styleN.innerHTML='html{font-size:'+width/16+'px !important;}';
head.appendChild(styleN);
})();
</script>
<script type="text/javascript">
(function(){
var width=document.documentElement.clientWidth;
var html=document.getElementsByTagName('html')[0];
html.style.fontSize=(width/7.5)+"px"
}())
</script>
</html>
viewport适配
相关代码:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no" />
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
width: 800px;
height: 200px;
background:yellowgreen;
}
</style>
</head>
<body>
<div id="box">box</div>
</body>
<script type="text/javascript">
(function(){
var head=document.head;
var width=document.documentElement.clientWidth;
var targetW=320;
var scale=width/targetW;
var meta=document.querySelector('meta[name="viewport"]');
meta.setAttribute('content','initial-scale='+scale+',user-scalable=no');
})();
</script>
</html>
1px适配
相关代码:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0,user-scalable=no"/>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 8rem;
height: 8rem;
border: 1px solid;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
/*(function(){
var head=document.head;
var width=document.documentElement.clientWidth;
var styleNode=document.createElement('style');
styleNode.innerHTML='html{font-size: '+width/16+'px !important;}';
head.appendChild(styleNode);
})();*/
/*(function(){
var meta=document.querySelector('meta[name="viewport"]');
var width=document.documentElement.clientWidth;
var targetW=320;
var scale=targetW/width;
meta.setAttribute('content','inital-scale= '+ scale +',user-scale=no');
})();*/
(function(){
var head=document.head;
var width=document.documentElement.clientWidth;
var dpr=window.devicePixelRatio||1;
var scale=1/dpr;
var meta=document.querySelector('meta[name="viewport"]');
meta.setAttribute('content','width=device-width,initial-scale='+ scale +',user-scalable=no');
var styleN=document.createElement('style');
styleN.innerHTML='html{font-size: '+ width/16*dpr +'px !important;}';
head.appendChild(styleN);
})();
</script>
</html>