了解移动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. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(16)-权限管理系统-漂亮的验证码

    系列目录 我们上一节建了数据库的表,但我发现很多东西还未完善起来,比如验证码,我们先做好验证码吧,验证码我们再熟悉不过了,为了防止恶意的登录,我们必须在登录页面加入验证码,下面我将分享一个验证码,这个 ...

  2. 数据库日常维护-CheckList_03有关数据库数据文件大小检查

    日常数据维护中容量规划是每个DBA的基础工作之一,也是非常重要的工作.在生产环境中一些比较重要的业务数据库会用前期容量规划不足,或出现意外的爆发式的数据增长,直至盛满整个磁盘空间,系统会无法使用,最终 ...

  3. 【Oracle 集群】Oracle 11G RAC教程之集群安装(七)

    Oracle 11G RAC集群安装(七) 概述:写下本文档的初衷和动力,来源于上篇的<oracle基本操作手册>.oracle基本操作手册是作者研一假期对oracle基础知识学习的汇总. ...

  4. Vue.js学习笔记(1)

    数据的双向绑定(ES6写法) 效果: 没有改变 input 框里面的值时

  5. 你真的会玩SQL吗?实用函数方法汇总

    你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...

  6. 在idea中maven项目jdk编译version总是跳到1.5

    bug描述 项目ide: idea 项目构建工具:maven bug现象:每次修改pom之后,idea自动扫描一遍,然后发现默认的compile级别跳到5.0. 每次手动去setting里修改comp ...

  7. 『.NET Core CLI工具文档』(十)dotnet-build

    说明:本文是个人翻译文章,由于个人水平有限,有不对的地方请大家帮忙更正. 原文:dotnet-build 翻译:dotnet-build 名称 dotnet-build -- 生成项目和所有的依赖 概 ...

  8. SQL Server Management Studio 无法修改表,超时时间已到 在操作完成之前超时时

    在修改表时,保存的时候显示:无法修改表,超时时间已到 在操作完成之前超时时间已过或服务器未响应 这是执行时间设置过短的原因,可以修改一下设置便能把执行时间加长,以便有足够的时间执行完修改动作. 在 S ...

  9. 学C#之设计模式系列笔记(2)观察者模式

    一.借鉴说明 1.<Head First Design Patterns>(中文名<深入浅出设计模式>) 2.维基百科,观察者模式,https://zh.wikipedia.o ...

  10. asp.net MVC4——省市三级联动

    controller: public ActionResult GetCity(string id) { AreaService _areaSvc = new AreaService(); List& ...