了解移动web viewport的知识,主要是为了切图时心中有数。本文主要围绕一个问题:切图时怎样设置<meta name="viewport">相关参数?围绕这个问题对viewport展开讲解。

一、viewport【此处的viewport即layout viewport】概念

移动设备的viewport是指设备屏幕上能够显示网页的一块区域。

这块显示网页的区域可能比浏览器可视区域大,也可能比浏览器可视区域小,切图时也可以设置。默认情况,移动设备的viewport大于移动设备浏览器的可视区域,主要是为了在移动设备上能够显示PC端的页面。

移动设备浏览器会有一个默认的viewport值可能是980px,1024px或其他值,由设备定。

手机浏览器要显示pc页面默认做了两件事,先把页面渲染在980px的layout viewport中,然后通过缩放在手机屏幕上展示,让用户看到页面全貌。

但是移动端切图的时候我们不会用这个默认的980px来布局,主要是因为
* 宽度不可控制,不同系统不同设备的默认值viewport都可能不同
* 页面缩小版显式,交互不友好
* 链接不可点
* 有缩放,缩放后又有滚动,交互不友好。

而且用户缩放会引起px和dp对应关系发生变化,页面放大一倍,那么css中1px所代表的物理像素会增加一倍,页面缩小一倍,css中1px所代表的物理像素会减少一倍。

所以用默认的980px布局是很不规范的,那么切图时为了排版正确,我们怎么做呢?我们会用到<meta>标签,下面一步步说。

二、layout viewport和visual viewport

1、layout viewport

浏览器默认的viewport叫layout viewport,这个layour viewport可以通过document.documentElement.clientWidth 来获取。(对前端切图来说很重要)

2、visual viewport

layout viewport的宽度大于浏览器可视区域的宽度,还需要一个viewport代表浏览器可视区域的大小(对前端切图来说不是太重要),这个viewport叫 visual viewport。

visual viewport的宽度可以通过window.innerWidth 来获取。

3、ideal viewport

visual viewport代表移动设备浏览器可视区域的宽度,layout view为了显示PC端页面被设置的很大,现在移动端发展这么快速,还需要一个能完美适配移动设备的viewport。这个完美适配的viewport中用户不需要缩放,不需要横向滚动条就能正常查看网站的所有内容。这个ideal viewport就是移动设备理想viewport。

ideal viewport的宽度等于移动设备的屏幕宽度。

三、利用meta标签对viewport进行控制

移动端默认的viewport是layout viewport,也就是那个比屏幕宽的viewport,而切图时需要让这个默认的layout viewport变成ideal viewport。这就是移动端开发中<meta> 标签的作用。

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

这段meta重置layout viewport的宽度为设备宽度,让我们切图时在ideal viewport中完成,而不是用默认的layout viewport来切图。

meta viewport 标签首先是由苹果公司在其safari浏览器中引入的,目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿,引入对meta viewport的支持,事实也证明这个东西还是非常有用的。

在苹果的规范中,meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值),如下:

width 设置layout viewport  的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport  的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/5443445.html有问题欢迎与我讨论,共同进步。

扩展阅读:

ppk大神对于移动设备上的viewport的研究(第一篇第二篇第三篇)。

移动WEB viewport 相关知识的更多相关文章

  1. 移动WEB像素相关知识

    了解移动web像素的知识,主要是为了切图时心中有数.本文主要围绕一个问题:怎样根据设备厂商提供的屏幕尺寸和物理像素得到我们切图需要的逻辑像素?围绕这个问题以iphone5为例讲解涉及到的web像素相关 ...

  2. Web缓存相关知识整理

    一.前言  工作上遇到一个这样的需求,一个H5页面在APP端,如果勾选已读状态,则下次打开该链接,会跳过此页面.用到了HTML5 的本地存储 API 中的 localStorage作为解决方案,回顾了 ...

  3. web聊天相关知识

    http相关知识 http是无状态,请求,响应模式的通信模式,就是用户每次通过浏览器点击一下页面,都需要重新与web服务器建立一下连接,且发送自己的 session id 给服务器端以使服务器端验证此 ...

  4. web.xml相关知识摘录整理

    web.xml 中的listener. filter.servlet 加载顺序及其详解 在项目中总会遇到一些关于加载的优先级问题,近期也同样遇到过类似的,所以自己查找资料总结了下,下面有些是转载其他人 ...

  5. 了解Web的相关知识

    一.WWW基础 WWW(world wide web, 万维网)是Internet上基于客户端/服务器体系结构的分布式多平台的超文本超媒体信息服务系统.它利用超文本(hypertext).超媒体(hy ...

  6. WEB的相关知识总结

    JS-->OOP/Module, DOM, JSON, AJAX------------------><script>, script.js的内容 HTML/JS/CSS HT ...

  7. WEB相关知识和Tomcat服务器

    WEB相关知识 1.Internet上供外界访问的Web资源分为: 静态web资源:指web页面中供人们浏览的数据始终是不变的. 动态web资源:指web页面中供人们浏览的数据是由程序产生的,不同时间 ...

  8. web跨域及cookie相关知识总结

    原文:web跨域及cookie相关知识总结   之前对于跨域相关的知识一致都很零碎,正好现在的代码中用到了跨域相关的,现在来对这些知识做一个汇总整理,方便自己查看,说不定也可能对你有所帮助. 本篇主要 ...

  9. 【Python五篇慢慢弹(5)】类的继承案例解析,python相关知识延伸

    类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...

随机推荐

  1. Owin:“System.Reflection.TargetInvocationException”类型的未经处理的异常在 mscorlib.dll 中发生

    异常汇总:http://www.cnblogs.com/dunitian/p/4523006.html#signalR 这个异常我遇到两种情况,供园友参考: 第一种,权限不够,在项目运行的时候弹出== ...

  2. Android之SQLite数据库使用

    转载整理于:http://my.csdn.net/lmj623565791 我刚开始接触Android的时候甚至都不敢相信,Android系统竟然是内置了数据库的!好吧,是我太孤陋寡闻了.由于我之前是 ...

  3. Android自定义控件之基本原理

    前言: 在日常的Android开发中会经常和控件打交道,有时Android提供的控件未必能满足业务的需求,这个时候就需要我们实现自定义一些控件,今天先大致了解一下自定义控件的要求和实现的基本原理. 自 ...

  4. ios 开发需要看的书籍

    1.吴航写的<iOS应用逆向工程 第2版> 2.<iOS 应用安全攻防实战> 3.

  5. Android 中关于Fragment嵌套Fragment的问题

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/5802146.html 问题描述: 在项目中Activity A中嵌套Fragment B,Fragment ...

  6. jQuery对象和DOM对象的区别

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...

  7. Android指纹识别深入浅出分析到实战(6.0以下系统适配方案)

    指纹识别这个名词听起来并不陌生,但是实际开发过程中用得并不多.Google从Android6.0(api23)开始才提供标准指纹识别支持,并对外提供指纹识别相关的接口.本文除了能适配6.0及以上系统, ...

  8. Rafy 框架 - 大批量导入实体

    某些场景下,开发者希望能够大批量地把实体的数据导入到数据库中.虽然使用实体仓库保存实体列表非常方便,但是其内部实现机制是一条一条的保存到数据库,当实体的个数较多时,效率就会很低.所以 Rafy 设计了 ...

  9. c# 九九乘法表

    static void Main(string[] args) { ; i < ; i++) { ; s <= i; s++) { Console.Write(s + "*&qu ...

  10. Android Time类 奇葩的设定

    Android 的Time.MONTH默认是0-11表示1-12月,小白表示坑爹啊,浪费多少精力啊.