<!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添加最佳视口的更多相关文章

  1. 响应式注意要添加“视口”约束标记---viewport

    视口:我们试图在iPhone中输出屏幕宽度,你会发现屏幕宽度是980,却和PC屏幕差不多大.原因是苹果主导的这些手机厂商,为了使用户获得完整web体验,很多设备都会欺骗浏览器返回一个数值较大的“视口” ...

  2. 移动端web开发——视口

    本篇主要是记录一下移动端视口的分类说明和其它的一些知识.在开始之前,先看一个典型的例子: <meta name="viewport" content="width= ...

  3. 移动web开发之视口viewport

    × 目录 [1]布局视口 [2]视觉视口 [3]理想视口[4]meta标签[5]总结 前面的话 在CSS标准文档中,视口viewport被称为初始包含块.这个初始包含块是所有CSS百分比宽度推算的根源 ...

  4. 浅谈响应式Web设计与实现思路

    是否还在为你的应用程序适配PC端,移动端,平板而苦苦思索呢,是否在寻找如何一套代码适配多终端方式呢,是否希望快速上手实现你的跨终端应用程序呢,是的话,那就看过来吧,本文阐述响应式UI设计相关理论基础, ...

  5. 一点响应式Web设计与实现思路

    摘要: 是否还在为你的应用程序适配PC端,移动端,平板而苦苦思索呢,是否在寻找如何一套代码适配多终端方式呢,是否希望快速上手实现你的跨终端应用程序呢,是的话,那就看过来吧,本文阐述响应式UI设计相关理 ...

  6. YChaos生成混沌图像

    YChaos是一款通过数学公式生成混沌图像的软件,展示混沌之美,数学之美.软件中定义一套简易的脚本语言,用于描述数学表达式.使用时需要先要将数学表达式写成该脚本的形式,解析脚本代码以生成相应的图形与图 ...

  7. [ActionScript 3.0] Away3D 灯光的使用

    package { import away3d.containers.View3D; import away3d.entities.Mesh; import away3d.events.MouseEv ...

  8. [ActionScript 3.0] Away3D 旋转效果

    package { import away3d.containers.View3D; import away3d.entities.Mesh; import away3d.events.MouseEv ...

  9. OSG 实现跟随节点的相机(转)

      本章教程将继续使用回调和节点路径(NodePath)来检索节点的世界坐标. 本章目标: 在一个典型的仿真过程中,用户可能需要从场景中的各种车辆和人物里选择一个进行跟随.本章将介绍一种将摄像机“依附 ...

随机推荐

  1. java static关键字使用

    一.使用static声明属性 1.使用static声明属性,则该属性属于全局变量(有些地方也称静态属性). 2.类的属性调用格式: 类名称.static 属性Preson.country=B城; 二. ...

  2. python调用虹软2.0第三版

    这一版,对虹软的功能进行了一些封装,添加了人脸特征比对,比对结果保存到文件,和从文件提取特征进行比对,大体功能基本都已经实现,可以进行下一步的应用开发了 face_class.py from ctyp ...

  3. ubuntu 安装 openssh-server，xinetd，vmware tools

    ●安装SSH服务 ●判断是否安装ssh服务,通过如下命令:ps -e|grep ssh 1, sudo apt-get update --->软件的更新地址变了,需要更新本机的sources.l ...

  4. HDU 6124 Euler theorem

    Euler theorem 思路:找规律 a       余数                  个数 1       0 1                     2 2       0 2   ...

  5. English trip -- VC(情景课)2 B Classroom objects

    Vocabulary focus 核心词汇 Listen and repeat. 听并跟读 1. a dictionary 2. paper 3. a pen 4. a ruler 5. a stap ...

  6. Recursive Queries CodeForces - 1117G (线段树)

    题面: 刚开始想复杂了, 还以为是个笛卡尔树.... 实际上我们发现, 对于询问(l,r)每个点的贡献是$min(r,R[i])-max(l,L[i])+1$ 数据范围比较大在线树套树的话明显过不了, ...

  7. Leha and another game about graph CodeForces - 840B (dfs)

    链接 大意: 给定无向连通图, 每个点有权值$d_i$($-1\leq d_i \leq 1$), 求选择一个边的集合, 使得删除边集外的所有边后, $d_i$不为-1的点的度数模2等于权值 首先要注 ...

  8. Linux的fork()写时复制原则（转）

    写时复制技术最初产生于Unix系统,用于实现一种傻瓜式的进程创建:当发出fork(  )系统调用时,内核原样复制父进程的整个地址空间并把复制的那一份分配给子进程.这种行为是非常耗时的,因为它需要: · ...

  9. hdu-6324-博弈

    Problem F. Grab The Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 524288/524288 K (Ja ...

  10. 一个SQL调优/优化（SQL TUNING）“小把戏”“哄得”小朋友挺满意

    前几天,去一个用户那里,解决完问题,和一个小朋友闲聊,他有点愁眉不展.郁郁寡欢的样子,似乎没心情和我说话,之前,他的话是最多的,见此状,我就问:怎么了?小朋友?,他说,这几天应用人员说他的某个模块的性 ...