首页 > 代码库 > 移动端适配方式
移动端适配方式
1.动态改变viewport的值
引入:
<script type="text/javascript" src="http://www.mamicode.com/ort.js"></script>
<script>
2.改变body的zoom值
<script>
function resetZoom(){
var deviceWidth=document.documentElement.clientWidth;//获取设备宽度
var scale=deviceWidth/640;//640是psd设计图宽度
document.body.style.zoom=scale;
}
resetZoom();
window.onresize=function (){
resetZoom();
}
</script>
3.
rem适配
<script>
function resetFont(){
var HTML=document.getElementsByTagName(‘html‘)[0];
var deviceWidth=document.documentElement.clientWidth;
//获取设备宽度
var scale=deviceWidth/640;//640是psd设计图宽度
HTML.style.fontSize=100*scale+‘px‘;
}
resetFont();
window.onresize=function (){
resetFont();
}
</script>
4.百分比
全换成百分比的方式
不建议使用,不太方便,最好用的还是rem适配;
移动端适配方式