<!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. Android蓝牙通信功能开发

    1. 概述 Bluetooth 是几乎现在每部手机标准配备的功能,多用于耳机 mic 等设备与手机的连接,除此之外,还可以多部手机之间建立 bluetooth 通信,本文就通过 SDK 中带的一个聊天 ...

  2. Win10安装Mysql5.7数据库

    Win10安装Mysql5.7数据库 最近做个demo在自己本地装了一个mysql5.7,有些小麻烦记录一下. 安装环境:系统是 windows 10 1.官网下载 下载地址:https://dev. ...

  3. 雷林鹏分享：Ruby 方法

    Ruby 方法 Ruby 方法与其他编程语言中的函数类似.Ruby 方法用于捆绑一个或多个重复的语句到一个单元中. 方法名应以小写字母开头.如果您以大写字母作为方法名的开头,Ruby 可能会把它当作常 ...

  4. Knights of a Polygonal Table CodeForces - 994B (贪心)

    大意:n个骑士, 每个骑士有战力p, 钱c, 每个骑士可以抢战力比他低的钱, 每个骑士最多抢k次, 对每个骑士求出最大钱数 按战力排序后, 堆维护动态前k大即可 #include <iostre ...

  5. php实现频率限制

    一.前言 公司要做呼叫中心,呼叫中心为了防止骚扰,需要限制用户拨打电话的频率,比如30s只能点击一次.这样的需求是通过redis来实现的. 二.具体实现 <?php class Resource ...

  6. 让CLOVER默认引导WINDOWS

    解决问题帖子: http://www.insanelymac.com/forum/topic/296000-force-clover-to-always-choose-win-81-efi-as-de ...

  7. UVA-11584 Partitioning by Palindromes （简单线性DP）

    题目大意:给一个全是小写字母的字符串,判断最少可分为几个回文子序列.如:“aaadbccb” 最少能分为 “aaa” “d” “bccb” 共三个回文子序列,又如 “aaa” 最少能分为 1 个回文子 ...

  8. 基础最短路（模板 bellman_ford）

    Description 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shirt.但是每当我们的工作人员把上百件的衣服从商店运回到赛场的时候,却是非常累的!所以现在他们想要寻找最短的从商店 ...

  9. linux processes

    So that Linux can manage the processes in the system, each process is represented by a task_struct   ...

  10. 玩转X-CTR100 | STM32F4 l Malloc内存管理

    我造轮子,你造车,创客一起造起来!塔克创新资讯[塔克社区 www.xtark.cn ][塔克博客 www.cnblogs.com/xtark/ ]      内存管理技术,即内存的申请和释放,使用X- ...