viewport适配移动端的方案
9547次阅读
715人点赞
发布时间: 2022-09-22 16:43:02
扫码到手机查看
![]()
viewport 适配的原理，viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的， 但是css像素和物理像素的比例是不一样的，等比的。
优点：所量即所得
缺点：没有使用完美视口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Document</title>
</head>
<body>
</body>
<script type="text/javascirpt">
(function(){
var targetW = 640;
var scale = document.documentElement.clientWidth/targetW;
var meta=document.querySelector("meta[name='viewport'");
meta.content = "initial-scale="+scale + ",minimum-scale="+ scale + ",maximum-scale="+scale+",user-scalable=no";
})()
</script>
</html>
目录