<!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. Spring AMQP 源码分析 06 - 手动消息确认

    ### 准备 ## 目标 了解 Spring AMQP 如何手动确认消息已成功消费 ## 前置知识 <Spring AMQP 源码分析 04 - MessageListener> ## 相 ...

  2. Codeforces 798A - Mike and palindrome

    A. Mike and palindrome time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  3. 【转】ArcGIS API for Silverlight/WPF 2.1学习笔记（五）

    2.Find示例代码 (1)xaml文件: //添加Symbol命名空间 xmlns:esriSymbols="clr-namespace:ESRI.ArcGIS.Client.Symbol ...

  4. Linux : 密码正确不能正常登陆，日志提示Could not get shadow information for user

    今天,再玩Centos7的时候,尝试修改了下ssh的端口.因为默认开启了SELinux,如果没有修改这个文件配置就修改端口sshd服务就不能正常启动了. 但是,当我修改会22端口的时候还是不能正常登陆 ...

  5. Android 7.0真实上手体验

    Android 7.0真实上手体验 Android 7.0的首个开发者预览版发布了,支持的设备只有Nexus6.Nexus 5X.Nexus 6P.Nexus 9.Nexus Player.Pixel ...

  6. Fair CodeForces - 987D (bfs)

    链接 大意:给定无向图边权均为1, 每个节点有一种货物, 对于每个节点, 求出拿到$s$种不同货物的最短距离 (每种货物独立计算,并且不用返回) 因为$s$较小, 直接枚举每种货物即可 所以问题就转化 ...

  7. bzoj2595: [Wc2008]游览计划 斯坦纳树

    斯坦纳树是在一个图中选取某些特定点使其联通(可以选取额外的点),要求花费最小,最小生成树是斯坦纳树的一种特殊情况 我们用dp[i][j]来表示以i为根,和j状态是否和i联通,那么有 转移方程: dp[ ...

  8. 加密算法(DES,AES,RSA,MD5,SHA1,Base64)比较和项目应用

    加密技术通常分为两大类:"对称式"和"非对称式". 对称性加密算法:对称式加密就是加密和解密使用同一个密钥.信息接收双方都需事先知道密匙和加解密算法且其密匙是相 ...

  9. OC NSArray数组排序

    一.一般排序 // 排序 NSArray *arr = @["]; NSArray *newarr = [arr sortedArrayUsingSelector:@selector(com ...

  10. .net面试题精选

    1.面向对象的三个特征?面向对象的五个基本设计原则? 2.接口与抽象类的区别? 3.谈谈设计模式? 4.线程与进程的区别?开发多线程程序应该考虑哪些问题? 5.简述 .NET中的Task? 6.简述. ...