其实即使不在html中添加meta viewport标签，每个移动端浏览器都会有一个默认的viewport，只是这个viewport的宽度是980，然后做1：3或者1：2的自动缩放。所以当不在html中添加meta viewport标签的时候，我们看到的字会很小。当我们设置viewport的时候，例如

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

这时候，现在的viewport就是设备宽度，而且初始缩放比例是1.0，所以看上去就很清楚啦。

关于viewport我自己的理解的更多相关文章

  1. 移动前端开发之viewport,devicePixelRatio的深入理解

    移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...

  2. 适配方案（四）适配的基础知识之单位、分辨率、viewport

    适配的基础知识 一.理解单位 px.pt.pc.sp.em.rem.dpr.dp.dip.ppi.dpi.ldpi.mdpi.hdpi.xhdpi.xxhdpi 如果你是ios开发,你需要了解的单位: ...

  3. [转贴]有关Angular 2.0的一切

    对Angular 2.0的策略有疑问吗?就在这里提吧.在接下来的这篇文章里,我会解释Angular 2.0的主要特性区域,以及每个变化背后的动机.每个部分之后,我将提供自己在设计过程中的意见和见解,包 ...

  4. Css-移动端适配总结

    前言 工作以后,大部分的业务工作都是基于移动端H5的,开发过程中学习了很多东西,遇到过许多问题,诸如rem\em\css px\device px等,本文纯属个人的归纳总结,如有问题,请指出亲喷~ P ...

  5. rem布局方案

    移动端适配,老生常谈的问题,这次再谈一次. 闲话少说,直奔正题. 一些像素概念 物理像素:即实际的每一个物理像素,也就是移动设备上每一个物理显示单元(点) 设备逻辑像素(css中的px):可以理解为一 ...

  6. 移动前端开发之viewport的深入理解

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...

  7. 转载：移动前端开发之viewport的深入理解

    原文作者:无双 原文链接:http://www.cnblogs.com/2050/p/3877280.html 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有 ...

  8. 移动前端开发之viewport的深入理解（转载）

    本文为转载文章,原文网址:http://www.cnblogs.com/2050/p/3877280.html 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有 ...

  9. 移动前端开发之 viewport 的深入理解

    移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响 ...

随机推荐

  1. SpringBoot配置发送邮件

    一.导入jar包 <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g ...

  2. maven创建项目，打包出可执行Jar

    官网参考 http://maven.apache.org/plugins/maven-assembly-plugin/assembly.html 配置多种打包方式 这个例子也不错 https://bl ...

  3. C# 利用反射调用类下的方法

    namespace TestReflection { public partial class Form1 : Form { public Form1() { InitializeComponent( ...

  4. python 连接 Oracle 乱码问题（cx_Oracle）

    用python连接Oracle是总是乱码,最后发现时oracle客户端的字符编码设置不对. 编写的python脚本中需要加入如下几句: import os os.environ['NLS_LANG'] ...

  5. 2018SDIBT_国庆个人第一场

    A - Turn the Rectangles CodeForces - 1008B There are nn rectangles in a row. You can either turn eac ...

  6. linux下svn不能连接上windows服务器：SSL handshake failed: SSL error

    在linux服务器下载https链接的svn源码时出现:SSL handshake failed: SSL error: Key usage violation in certificate has ...

  7. Zookeeper 在Linux系统的安装

    注册中心Zookeeper 官方推荐使用 zookeeper 注册中心.注册中心负责服务地址的注册与查找,相当于目录服务,服务提供者和消费者只在启动时与注册中心交互,注册中心不转发请求,压力较小. Z ...

  8. C语言中插入汇编nop指令

    工作过程中,有的时候需要打桩cycle,想在C语言中插入nop指令,可以采取的方法是 头文件中加入#inlude <stdio.h> 定义一个内联函数,然后调用这个函数,不过得测一下平台调 ...

  9. Ajax核心技术代码

    /* @author weichen */ var xhr = ''; function Ajax() { if(window.XMLHttpRequest) { var xhr = new XMLH ...

  10. JAVA JDK配置

    配置环境变量_jdk 1.右键选择[计算机]——[属性] ——[左上角的高级系统设置] 2.点击[环境变量] 3.在[系统变量]里点击[新建], 变量名填写JAVA_HOME,变量值填写JDK的安装路 ...