<!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. 【Golang】解决Go test执行单个测试文件提示未定义问题

    背景 很多人记录过怎么执行Go test单个文件或者单个函数,但是要么对执行单文件用例存在函数或变量引用的场景避而不谈,要么提示调用了其它文件中的模块会报错.其实了解了go test命令的机制之后,这 ...

  2. CAS-自旋锁

    自旋锁 自旋锁(spinlock):是指当一个线程在获取锁的时候,如果锁已经被其它线程获取,那么该线程将循环等待,然后不断的判断锁是否能够被成功获取,直到获取到锁才会退出循环.  获取锁的线程一直处于 ...

  3. [Java学习] Java虚拟机(JVM)以及跨平台原理

    相信大家已经了解到Java具有跨平台的特性,可以“一次编译,到处运行”,在Windows下编写的程序,无需任何修改就可以在Linux下运行,这是C和C++很难做到的. 那么,跨平台是怎样实现的呢?这就 ...

  4. 单细胞 RNA-seq 10X Genomics

    单细胞流程跑了不少,但依旧看不懂结果,是该好好补补了. 有些人可能会误会,觉得单细胞的RNA-seq数据很好分析,跟分析常规的RNA-seq应该没什么区别.今天的这篇文章2015年3月发表在Natur ...

  5. 读写生信流程必备的 Perl 语法

    最早就是写Perl的,后来来到公司转Python,现在又要负责流程了,开始重拾Perl,当然是借鉴别人现有的语法,我再重新组合. 基本语法就不介绍了,参照我之前文章 Perl   模块 use str ...

  6. Confluence 6 嵌套用户组的影响

    本部分说明了嵌套用户组对用户登录,权限和查看更新用户组的影响. 登录 如果用户属于一个授权的用户组或者授权用户组中的子用户组,当用户登录后,用户可以访问应用程序. 权限 如果用户属于的用户组或者用户组 ...

  7. JVM自定义类加载器加载指定classPath下的所有class及jar

    一.JVM中的类加载器类型 从Java虚拟机的角度讲,只有两种不同的类加载器:启动类加载器和其他类加载器. 1.启动类加载器(Boostrap ClassLoader):这个是由c++实现的,主要负责 ...

  8. 『cs231n』作业2选讲_通过代码理解优化器

    1).Adagrad一种自适应学习率算法,实现代码如下: cache += dx**2 x += - learning_rate * dx / (np.sqrt(cache) + eps) 这种方法的 ...

  9. 这里面盲点很多，构造函数的调用问题，还有vptr指针的++问题（已解决）

    #include<iostream> //实现vptr指针初始化问题 using namespace std; class Father { public: Father (int f) ...

  10. ubuntu mysql主从库的搭建

    1,首先我们要确定一个从库一个主库,紧记从库只能读取不能有其他的操作,如果操作写那主从就失效了,那就看看我们这么搭建主从吧! 2. 环境:Ubuntu,Mysql (主从的数据库版本必须保持一致) 主 ...