在移动设备上进行网页的重构或开发,

只有明白了viewport的概念

才能 响应 各种  不同分辨率 的移动设备

一、viewport的概念

通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,

在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,

但viewport又不局限于浏览器可视区域(设备)的大小,它可能比屏幕要大,也可能屏幕要小

在默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的

这是因为考虑到移动设备 屏幕  相对于桌面电脑来说都比较小,

所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,

移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可能是其它值,这个是由设备自己决定的),

但带来的后果就是浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

二、css中的1px并不等于设备的1px

在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,

这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。

但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。

在早先的移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,

在iphone3上,一个css像素确实是等于一个屏幕物理像素的。

后来随着技术的发展,移动设备的屏幕像素密度越来越高

从iphone4开始,苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,

但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,

这时,一个css像素实际包含了两个物理像素的。

例如,在Retina屏的iphone上,devicePixelRatio的值为2,也就是说1个css像素相当于2个物理像素。

但是要注意的是,devicePixelRatio在不同的浏览器中还存在些许的兼容性问题,所以我们现在还并不能完全信赖这个东西,具体的情况可以看下这篇文章

移动前端开发之viewport的深入理解 --- 待续的更多相关文章

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

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

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

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

  3. 移动前端开发之viewport的深入理解(转载)

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

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

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

  5. 移动前端开发之viewport的深入理解(转)

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

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

    今天去面试,被问到一个用了一万次的东西,然而我并不了解具体是个毛毛,看这一篇豁然开朗. DevicePixelRatio 以及这句话:移动设备上的viewport分为layout viewport  ...

  7. 【前端系列】移动前端开发之viewport的深入理解

    在页面上没有设置width所以样式显示有问题,本来选择的响应式模式的320*410结果看到页面的实际宽度确实980px. 本文转载自: 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的 ...

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

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

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

    原文链接:https://blog.csdn.net/u012402190/article/details/70172371 笔记 (20180919,目前暂且只看一部分)

随机推荐

  1. UVa 1343 旋转游戏(dfs+IDA*)

    https://vjudge.net/problem/UVA-1343 题意:如图所示,一共有8个1,8个2和8个3,如何以最少的移动来使得中间8个格子都为同一个数. 思路:状态空间搜索问题. 用ID ...

  2. 4:JavaScript中的对象

    对象 --属性+方法(都可以添加) ------继承关系------------原型(类) 获取变量属性:obj.x或者obj[“x”]: this对象----a---范围 arguments对象 参 ...

  3. python 散列表查找

    class HashTable: def __init__(self, size): self.elem = [None for i in range(size)] self.count = size ...

  4. Insert Delete GetRandom O(1)

    2018-07-15 18:36:29 问题描述: 问题求解: private ArrayList<Integer> ls; private HashMap<Integer, Int ...

  5. C# Random循环生成随机数重复问题解决方案

    C# Random循环生成随机数重复问题解决方案1.当我们通过Random生成随机数时,习惯的写法如下: int a=new Random().Next(0,100); 然后生成一个数据数没有任何问题 ...

  6. template.js 模版内调用外部JS方法

    template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.模版定义如下: ...

  7. m_Orchestrate learning system---三十五、php数据和js数据的解耦:php数据(php代码)不要放到js代码中

    m_Orchestrate learning system---三十五.php数据和js数据的解耦:php数据(php代码)不要放到js代码中 一.总结 一句话总结:也就是以html为中介,用html ...

  8. 我为什么放弃使用mybatis3的mapper注解了

    原文链接 最近在使用MyBatis3做项目.在使用注解实现Mapper的时候遇到了比较奇葩的问题:在实现数据的batch insert的时候总是报错.好不容易可以正常插入了,但是又不能返回自增的主键i ...

  9. java中的static关键字 学习总结

    使用static关键字修饰的变量和方法为静态变量.静态方法. 非静态方法可以访问静态变量/方法和非静态变量/方法,但静态方法只能访问静态变量/方法. 可以看到在静态方法中调用非静态变量和非静态方法时, ...

  10. 1月5日 对象Object, 含过去看的英文档的总结链接

    Object 也是一种数据类型,可以有属性,有method. 反之,在Ruby中,每一种数据类型都是Object.如String,Integer,Float,Array,Hash. IN Ruby e ...