<!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. 团队作业7—团队项目设计完善&编码测试

    一.根据OOD详细设计工作要点,修改完善团队项目系统设计说明书和详细设计说明. <软件设计方案说明书>Github仓库地址:https://github.com/RNTF6/web 完善内 ...

  2. 音视频学习系列第（七）篇---MediaCodec的使用

    音视频系列 什么是MediaCodec MediaCodec是安卓官方提供的一套用于音视频编码和解码的API,该API是在安卓4.1(API 16)引入的,因此只能用于4.1以上的手机 MediaCo ...

  3. 正则表达式中 (?=pattern) (?!pattern) (?<=pattern) (?<!pattern) 的使用

    2018-08-06 12:33:58 StackOverFlow上有个如下的问题: 这里就会用到正向肯定预查(?=pattern):

  4. 【python】模块整理

    ---文件.系统--- import glob  # 给定路径下查找符合规则文件.三个匹配符:”*”, “?”, “[]”.”*”匹配0个或多个字符:”?”匹配单个字符:”[]”匹配指定范围内的字符, ...

  5. Krapo 2

    The krpano Viewer is a small and very flexible high-performance viewer for all kind of panoramic ima ...

  6. ASP.NET简介

    1.什么是ASP.NET? ASP.NET是一套免费的网络架构,是为了构建一个伟大的或者说非常不错的网站或网络应用,并同时使用了一些前端技术,比如说HTML,CSS和JavaScript ASP.NE ...

  7. zk客户端的ClientCnxn类

    ClientCnxn是客户端的类:该类管理zk客户端的socket io,维持一个可用服务器的列表. //ClientCnxn类 private final LinkedList<Packet& ...

  8. WindowsLiveWriter安装步骤

    WindowsLiveWriter 安装WindowsLiveWriter.exe http://www.cnblogs.com/rhxuza1993/

  9. iOS系统版本与机型的对应关系

    1.手机系统版本:10.3 NSString* phoneVersion = [[UIDevice currentDevice] systemVersion]; 2.手机类型:iPhone 6 NSS ...

  10. json添加数据

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...