其实即使不在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. otter使用

    参考网址:https://github.com/alibaba/otter/wiki/QuickStart 参考网址: https://www.aliyun.com/jiaocheng/1127326 ...

  2. DirectShow设置采集帧率码率YUV<转>

    // 设置参数,p1=宽,p2=高,p3=帧率 AM_MEDIA_TYPE *p = NULL; IAMStreamConfig *pSC = NULL; pCGB2->FindInterfac ...

  3. join和子查询的一点点思考

    代码和表设计过程中,为了考虑数据库的范式,通常导致需要join多张表或子查询, 如报表场景, 可此种方式在大数据量的 情况下,效率较低.  如果能做适量的数据冗余,便可以减少join或子查询,效率较高 ...

  4. Oracle问题小结

    1.win8.1安装Oracle11g后,重启电脑,出现黑屏. 解决办法:安全模式下,找到以oracle开头的全部服务,所有“自动”或者“自动(延迟启动)”的都设置为“手动”,只需要开启OracleO ...

  5. LeetCode OJ 79. Word Search

    题目 Given a 2D board and a word, find if the word exists in the grid. The word can be constructed fro ...

  6. [Linux]Ubuntu下安装Sublime-text 且 支持中文输入

    ------------------------------------------------------------------------------------------ 首先进行如下操作: ...

  7. js数组对象--数据格式的转换（字符串，对象的取值与赋值）

    材料:提供一份数据:arr=[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value ...

  8. JAVA 泛型的参数的传递示意图

    泛型的两种参数传递方式

  9. ANg-线性回归算法

    线性回归算法 linear regression 对于线性回归模型,我们期望对于样本数据集,通过假设函数,得出目标值 代价函数 m在这里指的是训练样本的数量 所以我们的目的就是得出代价函数(平方误差代 ...

  10. 学习JS的心路历程-参数传递方式（上）

    很多人认为JS的传递方式是值是Call by value, 物件及数组是Call by Reference.甚至还有人宣称其实JS是Call by sharing,那到底是哪一个呢? 这两天我们一一来 ...