动态设置缩放比例和html字体大小

本文转载自查看原文 2017-06-05 19:20 8573 前端开发

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>

　　　　<!--获取像素比：window.devicePixelRatio
　　　　1 / 像素 = 缩放的比例-->

 　　var initScale = 1 / window.devicePixelRatio; document.write('<meta name="viewport" content="width=device-width,user-scalable=no，initial-scale='+ initScale +',minimum-scale='+ initScale +',maximum-scale='+ initScale +'">'); 
　　var initWidth = window.document.documentElement.clientWidth; document.getElementsByTagName('html')[0].style.fontSize = initWidth / 50 + 'px';
    </script>
    <style>
        body{
            margin: 0;
            overflow: hidden;
        }
        .box{
            width: 10rem;
            height: 10rem;
            margin: 0.33333rem;
            background: pink;
            float: left;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
    <div class="box">box4</div>
    <div class="box">box5</div>
    <div class="box">box6</div>
</body>

</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 html 缩放页面样式不乱（动态设置rem的跟字体大小rem布局实现） js设置html根节点的style字体【Vue动态调整全局字体大小】火狐浏览器设置页面缩放比例方法 JS 获取浏览器显示比例，缩放比例移动端字体大小自动缩放css样式控制 latex设置表格字体大小 iOS TableView索引字体大小设置小狼毫字体大小及背景设置 openlayers Text字体大小设置 Latex局部字体大小设置