1. 程式人生 > >移動端適配(2)---viewport適配

移動端適配(2)---viewport適配

float scala screen bsp pen meta log initial width

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

移動端適配(2)---viewport適配