<!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>

动态设置缩放比例和html字体大小的更多相关文章

  1. IDEA设置Ctrl+滚轮调整字体大小

    IDEA设置Ctrl+滚轮调整字体大小(转载)   按Ctrl+Shift+A,出现搜索框 输入mouse: 点击打开这个设置:勾选 点击ok,之后就可以通过Ctrl+滚轮 调整字体大小了.

  2. WebStorm设置编辑器中的字体大小

    启动webStorm之后,点击“FIle"菜单,选择其下的”Settings" 2.在左侧的菜单中选择“Editor/Colors & Fonts/Font 在右侧Sche ...

  3. Eclipse设置：背景与字体大小和xml文件中字体大小调整

    Eclipse中代码编辑背景颜色修改:代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下:1.打开wi ...

  4. IDEA或Webstorm设置Ctrl+滚轮调整字体大小

    按Ctrl+Shift+A,出现搜索框 输入mouse: 点击打开这个设置:勾选 点击ok,之后就可以通过Ctrl+滚轮 调整字体大小了.

  5. Eclipse中设置背景颜色与字体大小和xml文件中字体大小调整

    Eclipse中代码编辑背景颜色修改: 代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下: 1.打开 ...

  6. Jupyter Notebook 设置黑色背景主题、字体大小、代码自动补全

    1.背景主题.字体大小设置 安装Jupyter主题: pip install jupyterthemes 然后,更新Jupyter主题: pip install --upgrade jupyterth ...

  7. Eclipse设置：背景与字体大小、xml文件中字体大小调整和自动提示 SVN插件安装

    Eclipse中代码编辑背景颜色修改: 代码编辑界面默认颜色为白色.对于长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以改变workspace的背景色,可以使眼睛舒服一些.设置方法如下: 1.打开 ...

  8. （备忘）Eclipse设置：背景与字体大小和xml文件中字体大小调整

    Eclipse中代码编辑背景颜色修改: 1.打开window / Preference,弹出Preference面板  2.展开General标签,选中Editors选项,展开.  3.选中 Text ...

  9. pycharm设置用滑轮改变字体大小

    在电脑第一次安装pycharm之后,发现每次调整代码界面的字体,总是需要到setting里面调整,这样非常不方便,特别是对于代码量很多的时候,我们有时候需要把目光聚焦到某一句代码,这个时候就需要放大, ...

随机推荐

  1. 最简单 NDK 样例

    以下在 Ubuntu下 编译一个 c 语言 hello world 并在 android 手机或模拟器上执行 进入程序位置 cd  ~/pnp5/jni 有三个文件 main.c Android.mk ...

  2. VS打包部署图文具体步骤及程序防卸载的制作（password验证卸载）

    1.  在vs2010 选择"新建项目->"其它项目类型"->" Visual StudioInstallerà "安装项目": ...

  3. MYSQL入库常用PHP函数

    addslashes   addslashes() 函数在指定的预定义字符前添加反斜杠.这些字符是单引号(').双引号(").反斜线(\)与NUL(NULL字符).   stripslash ...

  4. linux c 获取当前执行进程总数

    获取当前执行进程总数的命令为: ps auxw | wc -l 获取当前执行进程总数的源代码例如以下: #include <stdio.h> #include <stdlib.h&g ...

  5. struts2开发中一些概念的理解

    对象关系映射(orm)中的两个概念 VO 和 PO: 它们都包含一些属性及这些属性的get/set方法 1.VO:是值对象,可以理解为业务对象,存活在业务层,供业务逻辑使用,当前业务逻辑需要一组什么数 ...

  6. Robot Framework快捷键图标制作 去掉cmd命令窗口

    安装好Robot Framework之后,通过 C:\Python27\Scripts\ride.py 启动时会带上一个命令行窗口: 怎样让启动的界面后面不带这个命令行窗口,且图片以机器人显示? 方法 ...

  7. ios19---xib

    // // ViewController.m #import "ViewController.h" @interface ViewController () @end @imple ...

  8. [RK3288][Android6.0] 调试笔记 --- 如何确认声卡是否注册成功【转】

    本文转载自:http://blog.csdn.net/kris_fei/article/details/78399875 Platform: RK3288 OS: Android 6.0 Kernel ...

  9. linux下的zookeeper启动

    zookeeper的安装目录:/usr/local/zookeeper-3.4.6/bin/zkServer.sh; 配置文件路径:../conf/zoo.cfg 端口 :2181: ZooKeepe ...

  10. bzoj 4807: 車【组合数+高精+线性筛】

    设n>m,答案是\( C_n^m \),然后高精就行了 具体做法是先把指数筛出来,然后对每个数因数分解,记录质因子个数,最后被除数减去除数质因子个数,把剩下的质因子乘起来就行了 #include ...