移动前端第一弹: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的 ...
随机推荐
- 查看FPM在你的机子上的平均内存占用情况
ps --no-headers -o "rss,cmd" -C php-fpm | awk '{ sum+=$1 } END { printf ("%d%s\n" ...
- Win2008 Server搭建FTP服务器
首先创建一个专门的FTP用户,当然也可以不创建. 用系统自带的超管用户. 设置用户名和密码.用户下次登陆必须修改密码记得去掉勾选. 在角色里面的WEB服务器找到添加角色服务.我之前有安装IIS. 没有 ...
- Matplotlib中的颜色
使用matplotlib中会遇到选择颜色的问题,很多人会觉得自带的matlab风格的颜色不好看.好在Matplotlib已经预见到了这个问题,除了支持最基本的matlab传统颜色之外,还支持很多种颜色 ...
- IOC&DI
[概述] 1.IOC(Inversion of Control): 即“反转控制”,不是什么技术,而是一种设计思想.其思想是反转资源获取的方向. 传统的资源查找方式要求组件向容器发起请求查找资源.作为 ...
- 3D标签云
一.圆的坐标表达式 for(var i = 0;i < len;i++){ degree = (2*(k+1)-1)/len - 1;a = Math.acos(degree);//这样取得弧度 ...
- C++标准模板库 ——堆栈使用
include using namespace std; stack S; S.push(i); S.pop(); int x = S.top(); ```
- c语音 dll断点调试方法
转自:https://blog.csdn.net/qingzai_/article/details/45348613 dll调试方法: 1.把最新生成的dll和pdb放到 启动这个dll 的进程目录下 ...
- [SPOJ7258]Lexicographical Substring Search
[SPOJ7258]Lexicographical Substring Search 试题描述 Little Daniel loves to play with strings! He always ...
- [K/3Cloud] 分录行复制和新增行的冲突如何处理
新增行:执行AfterCreateNewEntryRow,这个函数里面对一些数据进行处理(比如字段给上默认值): 复制行:复制行过程中希望这些字段能够得到我修改行信息后的数据,如果不处理,执行到Aft ...
- [K/3Cloud] 创建一个业务单据表单插件
概念 创建一个业务单据插件,处理单据的相关控制逻辑. 示例 新建一个类,继承自单据插件基类Kingdee.BOS.Core.Bill.PlugIn.AbstractBillPlugIn. using ...