移动端适配(2)---viewport适配

2018-09-29 03:51:46来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

通过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>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript switch语句

下一篇:从零开始的全栈工程师——html篇1.7