码迷,mamicode.com
首页 > 其他好文 > 详细

t添加最佳视口

时间:2017-03-19 15:27:03      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:client   rem   ati   user   ons   ext   ice   console   use   

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="05.css"/>
<body>
<div class="box">

<ul>
<li>1</li>
<li>2</li>
</ul>

</div>
</body>
<script type="text/javascript">

//1. 获取像素比值

var num = 1/window.devicePixelRatio;

//2. 动态生成meta标签 视口标签

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

var meta = document.createElement(‘meta‘);

meta.name = ‘viewport‘;

meta.content = ‘width=device-width, user-scalable=no, initial-scale=‘+num+‘, maximum-scale=‘+num+‘, minimum-scale=‘+num+‘‘;

document.documentElement.appendChild(meta);

//3. 获取页面十分之1大小

var width = document.documentElement.clientWidth/10;

//4. 设置html的字号为页面的百分之1

document.documentElement.style.fontSize = width+‘px‘;

// 现在html的字号 就是百分之一的页面大小
//而 1rem就等于一个html的字号 就等于 页面百分之1 10rem

console.log(width)

</script>
</html>

t添加最佳视口

标签:client   rem   ati   user   ons   ext   ice   console   use   

原文地址:http://www.cnblogs.com/shuaishuaidejun/p/6580473.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!