移动前端第一弹:viewport详解
前言
这次想聊聊移动开发相关的事。是的,你没有看错,一句话就可以开始你的移动前端开发。
你心里一定在想,什么话这么酷,能够瞬间带入到移动前端开发的世界。
但其实它一点也不新奇,不复杂。
viewport简介
没错,就是viewport
特性,一个移动专属的Meta
值,用于定义视口的各种行为。
该特性最先由Apple
引入,用于解决移动端的页面展示问题,后续被越来越多的厂商跟进。
举个简单的例子来讲为什么会需要它:
我们知道用户大规模使用手机等移动设备来进行网页浏览器,其实得益于智能手持设备的兴起,也就是近几年的事。(还记得不久前的几年,满大街都还是诺基亚的天下么?)
这时有一个很现实的问题摆在了厂商面前,用户并不能很好地通过手机等设备访问网页,因为屏幕太小。
layout viewport
Apple
也发现了这个问题,并且适时的出现,它提出了一个方案用来解决这个问题。在iOS Safari中定义了一个viewport meta
标签,用来创建一个虚拟的布局视口(layout viewport)
,而这个视口的分辨率接近于PC显示器,Apple
将其定义为980px
(其他厂商各有不同①)。
这就很好的解决了早期的页面在手机上显示的问题,由于两者之间的宽度趋近,CSS只需要像在PC上那样渲染页面就行,原有的页面结构不会被破坏。
①的描述大致如下,数值不一定持续准确,厂商可能更改,但这个绝对值其实并非特别重要:
iOS, Android基本都是: 980px
BlackBerry: 1024px
visual viewport
有了layout viewport
,我们还需要一个视口用来承载它,这个视口可以简单的认为是手持设备物理屏幕的可视区域,我们称之为(视觉视口)visual viewport
。这是一个比较直观的概念,因为你能看得见你的手机屏幕。
对于visual viewport
,开发者一般只需要知道它的存在和概念就行,因为无法对它进行任何设置或者修改。很明显,visual viewport
的尺寸不会是一个固定的值,甚至每款设备都可能不同。大致列几种常见设备的visual viewport
尺寸:
- iPhone4~iPhone5S: 320*480px
- iPhone6~iPhone6S: 375*627px
- iPhone6 Plus~iPhone6S Plus: 414*736px
以iPhone4S
为例,会在其320px②的visual viewport
上,创建一个宽980px
的layout viewport
,于是用户可以在visual viewport
中拖动或者缩放网页,来获得良好的浏览效果;布局视口用来配合CSS渲染布局,当我们定义一个容器的宽度为100%
时,这个容器的实际宽度是980px
而不是320px
,通过这种方式大部分网页就能以缩放的形式正常显示在手机屏幕上了。
②的描述大致如下:
早期移动前端开发工程师常能见到宽640px的设计稿,原因就是UI工程师以物理屏幕宽度为320px的iPhone4-iPhone5S
作为参照设计;
当然,现在你还可能会见到750px和1242px尺寸的设计稿,原因当然是iPhone6的出现
当然,为了更好的适配移动端或者只为移动端设计的应用,单有布局视口和视觉视口还是不够的。
ideal viewport
我们还需要一个视口,它类似于布局视口,但宽度和视觉视口相同,这就是完美视口(ideal viewport)。
有了完美视口,用户不用缩放和拖动网页就能够很好的进行网页浏览。而完美视口也是通过viewport meta
的某种设置来达到。
说了这么一大堆的东西,貌似都和viewport
有关联,那么viewport
到底怎么搞,请继续往下。
关于3个视口,PPK已经做了非常棒的阐释,你也可以在
StackOverflow
上找到一些对此描述的相互补充,例如:[1], [2],有兴趣的童鞋也可以看看
viewport特性
通常情况下,viewport
有以下6种设置。当然厂商可能会增加一些特定的设置,比如iOS Safari7.1增加了一种在网页加载时隐藏地址栏与导航栏的设置:minimal-ui
,不过随后又将之移除了。
Name | Value | Description |
---|---|---|
width | 正整数或device-width |
定义视口的宽度,单位为像素 |
height | 正整数或device-height |
定义视口的高度,单位为像素 |
initial-scale | [0.0-10.0] | 定义初始缩放值 |
minimum-scale | [0.0-10.0] | 定义缩小最小比例,它必须小于或等于maximum-scale设置 |
maximum-scale | [0.0-10.0] | 定义放大最大比例,它必须大于或等于minimum-scale设置 |
user-scalable | yes/no | 定义是否允许用户手动缩放页面,默认值yes |
width
width
被用来定义layout viewport
的宽度,如果不指定该属性(或者移除viewport meta
标签),则layout viewport
宽度为厂商默认值。如:iPhone为980px
;
举个例子:
1 |
<meta name="viewport" content="width=device-width" /> |
此时的layout viewport
将成为ideal viewport
,因为layout viewport
宽度与设备视觉视口宽度一致了。
除了width
之外,还有一个属性定义也能实现ideal viewport
,那就是initial-scale
。
height
与width
类似,但实际上却不常用,因为没有太多的use case。
initial-scale
如果想页面默认以某个比例放大或者缩小然后呈现给用户,那么可以通过定义initial-scale
来完成。
initial-scale
用于指定页面的初始缩放比例,假定你这样定义:
1 |
<meta name="viewport" content="initial-scale=2" /> |
那么用户将会看到2倍大小的页面内容。
在说width
的时候,我们说到initial-scale
也能实现ideal viewport
,是的,你只需要这样做,也可以得到完美视口:
1 |
<meta name="viewport" content="initial-scale=1" /> |
maximum-scale
在移动端,你可能会考虑用户浏览不便,然后给予用户放大页面的权利,但同时又希望是在一定范围内的放大,这时就可以使用maximum-scale
来进行约束。
maximum-scale
用于指定用户能够放大的比例。
举个例子来讲:
1 |
<meta name="viewport" content="initial-scale=1,maximum-scale=5" /> |
假设页面的默认缩放值initial-scale
是1
,那么用户最终能够将页面放大到这个初始页面大小的5倍。
minimum-scale
类似maximum-scale
的描述,不过minimum-scale
是用来指定页面缩小比例的。
通常情况下,为了有更好地体验,不会定义该属性的值比1
更小,因为那样页面将变得难以阅读。
user-scalable
如果你不想页面被放大或者缩小,通过定义user-scalable
来约束用户是否可以通过手势对页面进行缩放即可。
该属性的默认值为yes
,即可被缩放(如果使用默认值,该属性可以不定义);当然,如果你的应用不打算让用户拥有缩放权限,可以将该值设置为no
。
使用方法如下:
1 |
<meta name="viewport" content="user-scalable=no" /> |
结语
正如开篇所说,这既不高深也不新奇,它而仅仅是一点观念转变。
当你掌握了viewport
,那么意味着你已经大致了解了移动平台与PC平台的不同,你可以更专注而细致的去解决某些平台差异问题。
移动前端第一弹:viewport详解的更多相关文章
- 前端技术之_CSS详解第一天
前端技术之_CSS详解第一天 一html部分 略.... 二.列表 列表有3种 2.1 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unorde ...
- 前端技术之_CSS详解第二天
前端技术之_CSS详解第二天 1.css基础选择器 html负责结构,css负责样式,js负责行为. css写在head标签里面,容器style标签. 先写选择器,然后写大括号,大括号里面是样式. & ...
- 前端技术之_CSS详解第三天
前端技术之_CSS详解第三天 二.权重问题深入 2.1 同一个标签,携带了多个类名,有冲突: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- 前端技术之_CSS详解第四天
前端技术之_CSS详解第四天 一.第三天的小总结 盒模型box model,什么是盒子? 所有的标签都是盒子.无论是div.span.a都是盒子.图片.表单元素一律看做文本. 盒模型有哪些组成: wi ...
- 前端技术之_CSS详解第五天
前端技术之_CSS详解第五天 一.行高和字号 1.1 行高 CSS中,所有的行,都有行高.盒模型的padding,绝对不是直接作用在文字上的,而是作用在“行”上的. <!DOCTYPE html ...
- 前端技术之_CSS详解第六天--完结
前端技术之_CSS详解第六天--完结 一.复习第五天的知识 a标签的伪类4个: a:link 没有被点击过的链接 a:visited 访问过的链接 a:hover 悬停 a:active 按下鼠标不松 ...
- 学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳
学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 9 / 25 转载请注明出处!️ 目录 学会Git玩转GitHub(第一篇) 入门详解 - 精简归纳 ...
- HTML5之Viewport详解
做移动Web开发也有一年多的时间了,虽然手机上浏览器对于PC上来说很友好了,但是手机各种设备的显示尺寸分辨率大小不一也要花大心思兼容它们. 关于HTML5中Viewport的文章Google,百度一搜 ...
- AngularJS + CoffeeScript 前端开发环境配置详解
AngularJS 号称 '第一框架' ('The first framework') 确实是名不虚传.由其从jQuery中完全转入AngularJS后就有无法离开他的感觉了.虽然AngularJS的 ...
随机推荐
- 使用vim正则表达式删除C/C++注释 及 两种注释风格替换
/*对于C风格的注释可以使用如下命令*/ :%s/\_s*\/\*\(\S\|\_s\)\{-}\*\///g //对于C++风格注释 :%s/\/\/.*//g /*...*/ -> //.. ...
- 洛谷——P1164 小A点菜
P1164 小A点菜 题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家……餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:“随便点”. 题目描述 不过u ...
- Codeforces 799E(贪心)
题意: 有n个物品,购买物品i需要花费ci的代价.Arkady和Masha分别有喜欢的物品. 现在需要从中选m个,使得这m个物品中至少有k个Arkady喜欢的物品,k个Masha喜欢的物品. 输出满足 ...
- 恢复表数据的办法(delete删除可恢复,truncate不可恢复)
select * from table_name as of timestamp to_timestamp('2018-12-20 00:00:00', 'yyyy-mm-dd hh24:mi:ss' ...
- Nginx+Tomcat+Memcached负载均衡和session共享
1. 演示搭建 说明:本文参考网络日志http://blog.csdn.net/remote_roamer/article/details/51133790,结合实际操作,仅做个演示记录. 1.1. ...
- ArcGIS for Android离线数据编辑实现原理
来自:http://blog.csdn.net/arcgis_mobile/article/details/7565877 ArcGIS for Android中现已经提供了离线缓存图片的加载功能,极 ...
- dubbo的泛化调用研究
结论: 泛化调用需要继承一个类,在配置文件里需要明确指出generic=true; 泛化调用在书写provider代码时,变化不大: 泛化调用和普通调用的区别主要在consumer,从‘调用’的表面意 ...
- tornado的http服务器实现
使用tornado实现的一个简单http服务器:只需要定义自己的处理方法,其他的东西全部交给tornado完成. #coding:utf-8 import tornado.httpserver imp ...
- Ubuntu和Win7双系统,ubuntu被删,重新启动之后显示,no such partition
准备一张windows7的系统安装盘.从光盘启动电脑,在光盘启动完毕之后.按shift+F10,调出cmd命令终端,在终端输入:bootrec/fixmbr OK.重新启动之后就搞定了
- angularJS 系列(七)
In AngularJS 1.3+, there is One-time binding built-in: The main purpose of one-time binding expressi ...