当前位置： 移动技术网 > IT编程>网页制作>CSS > 移动端适配（2）---viewport适配

移动端适配（2）---viewport适配

2018年09月29日  | 移动技术网IT编程  | 我要评论

通过viewport来适配

<script>

(function(){

　　var w=window.screen.width;

　　console.log(w);//获取屏幕尺寸

　　var targetw=320;//之后所有的都是按照320来做

　　var scale=w/targetw;//缩放值:当前尺寸/目标尺寸

　　var meta=document.createelement("meta");

　　meta.name="viewport";

　　meta.content="user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""

　　document.head.appendchild(meta);

})()

</script>

<!--

<meta  name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">

-->

<style>

　　div{

　　　　width:80px;

　　　　height:100px;

　　　　float:left;

　　　　border:1px solid #000;

　　　　box-sizing:border-box;

　　}

</style>

<div></div>

<div></div>

<div></div>

<div></div>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网