meta中viewport介绍,关于移动web前端viewport详解入门知识_meta小白攻略

前言这次想聊聊移动开发相关的事。是的,你没有看错,一句话就可以开始你的移动前端开发。你心里一定在想,什么话这么酷,能够瞬间带入到移动前端开发的世界。但其实它一点也不新奇,不复杂。viewport简介没错,就是viewport特性,一个移动专属的Meta值,用于定义视口的各种行为。该特性最先由Apple引入,用于解决移动端的页面展示问题,后续被越来越多的厂商跟

meta中viewport介绍,关于移动web前端viewport详解入门知识

前言

这次想聊聊移动开发相关的事。是的,你没有看错,一句话就可以开始你的移动前端开发。

meta中viewport介绍,关于移动web前端viewport详解入门知识_meta小白攻略

你心里一定在想,什么话这么酷,能够瞬间带入到移动前端开发的世界。

但其实它一点也不新奇,不复杂。

viewport简介

没错,就是viewport特性,一个移动专属的Meta值,用于定义视口的各种行为。

该特性最先由Apple引入,用于解决移动端的页面展示问题,后续被越来越多的厂商跟进。

举个简单的例子来讲为什么会需要它:

我们知道用户大规模使用手机等移动设备来进行网页浏览器,其实得益于智能手持设备的兴起,也就是近几年的事。(还记得不久前的几年,满大街都还是诺基亚的天下么?)

这时有一个很现实的问题摆在了厂商面前,用户并不能很好地通过手机等设备访问网页,因为屏幕太小。

layout viewport

Apple也发现了这个问题,并且适时的出现,它提出了一个方案用来解决这个问题。在iOS Safari中定义了一个viewport meta标签,用来创建一个虚拟的布局视口(layout viewport),而这个视口的分辨率接近于PC显示器,Apple将其定义为980px(其他厂商各有不同①)。

这就很好的解决了早期的页面在手机上显示的问题,由于两者之间的宽度趋近,CSS只需要像在PC上那样渲染页面就行,原有的页面结构不会被破坏。

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,通过这种方式大部分网页就能以缩放的形式正常显示在手机屏幕上了。

当然,为了更好的适配移动端或者只为移动端设计的应用,单有布局视口和视觉视口还是不够的。

ideal viewport

我们还需要一个视口,它类似于布局视口,但宽度和视觉视口相同,这就是完美视口(ideal viewport)。

有了完美视口,用户不用缩放和拖动网页就能够很好的进行网页浏览。而完美视口也是通过viewport meta的某种设置来达到。

说了这么一大堆的东西,貌似都和viewport有关联,那么viewport到底怎么搞,请继续往下。

viewport特性

通常情况下,viewport有以下6种设置。当然厂商可能会增加一些特定的设置,比如iOS Safari7.1增加了一种在网页加载时隐藏地址栏与导航栏的设置:minimal-ui,不过随后又将之移除了。

NameValueDescription
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-scalableyes/no定义是否允许用户手动缩放页面,默认值yes

width

width被用来定义layout viewport的宽度,如果不指定该属性(或者移除viewport meta标签),则layout viewport宽度为厂商默认值。如:iPhone为980px;

举个例子:

<meta name="viewport" content="width=device-width" />

除了width之外,还有一个属性定义也能实现ideal viewport,那就是initial-scale。此时的layout viewport将成为ideal viewport,因为layout viewport宽度与设备视觉视口宽度一致了。

height

与width类似,但实际上却不常用,因为没有太多的use case。

initial-scale

如果想页面默认以某个比例放大或者缩小然后呈现给用户,那么可以通过定义initial-scale来完成。

initial-scale用于指定页面的初始缩放比例,假定你这样定义:

<meta name="viewport" content="initial-scale=2" />

在说width的时候,我们说到initial-scale也能实现ideal viewport,是的,你只需要这样做,也可以得到完美视口:那么用户将会看到2倍大小的页面内容。

<meta name="viewport" content="initial-scale=1" />

在移动端,你可能会考虑用户浏览不便,然后给予用户放大页面的权利,但同时又希望是在一定范围内的放大,这时就可以使用maximum-scale来进行约束。maximum-scale

maximum-scale用于指定用户能够放大的比例。

举个例子来讲:

<meta name="viewport" content="initial-scale=1,maximum-scale=5" />

minimum-scale假设页面的默认缩放值initial-scale是1,那么用户最终能够将页面放大到这个初始页面大小的5倍。

类似maximum-scale的描述,不过minimum-scale是用来指定页面缩小比例的。

通常情况下,为了有更好地体验,不会定义该属性的值比1更小,因为那样页面将变得难以阅读。

user-scalable

如果你不想页面被放大或者缩小,通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。

该属性的默认值为yes,即可被缩放(如果使用默认值,该属性可以不定义);当然,如果你的应用不打算让用户拥有缩放权限,可以将该值设置为no。

使用方法如下:

<meta name="viewport" content="user-scalable=no" />

结语

正如开篇所说,这既不高深也不新奇,它而仅仅是一点观念转变。

当你掌握了viewport,那么意味着你已经大致了解了移动平台与PC平台的不同,你可以更专注而细致的去解决某些平台差异问题。

海计划公众号
(0)
上一篇 2020/04/06 04:10
下一篇 2020/04/06 04:09

您可能感兴趣的内容

  • 人们需要担心的7种云计算攻击技术菜鸟指南_云计算基础教程

    人们需要担心的7种云计算攻击技术菜鸟指南 安全专家对网络攻击者针对企业云计算环境实施的常见和相关的攻击方法进行了阐述和分析。 随着越来越多的企业将业务迁移到云计算环境,寻求攻击的网…

    2020/03/20
  • HTML中的target(菜鸟教程下载self,blank)用法总结_标签菜鸟教程

    最近一个项目,多次遇到target=’_self’, target=’_blank’的用法, 再次总结一下:1.标签XX
    XX2.标签<form name=alipayment action=alip

    2020/03/30
  • nodejs使用node-xlsx生成excel入门教程_excel小白常识

    近日,应领导要求,从网上抓了一大批数据存入了数据库,可是妈妈批 ,市场妹子要的是excel表格啊,毕竟妹子的话还是要听的(关键人家语气蛮好的),就从网上查一些资料。可是查来查去发现很多都是复制粘贴,说实话真的讨厌这样行为,代码好歹你自己先跑跑,加点注释,有些人的代码你确定你自己跑过? 就发到网上坑人,各种耽误别人的时间。nodejs中生成excel的库很多,

    2020/03/26
  • Coolors入门基础教程_配色方案生成与分享

    Coolors入门指南 官方网址:https://coolors.co/ 简介描述:配色方案生成与分享 Generate perfect color combinations fo…

    2020/03/06
  • 浏览器显示“网站连接不安全”,是什么原因?使用说明_安全基础知识

    Chrome 浏览器显示“网站连接不安全”,这可能是您最近访问网站时经常遇到的问题,浏览器地址栏中域名前面显示圆圈i图标和“不安全”字样,点击这个字样,就会看到红字警告“你与此网站之间建立的连接不安全”,这是怎么回事?这样的网站可以继续访问吗?Chrome 浏览器显示“网站连接不安全”的原因“你与此网站之间建立的连接不安全”这是浏览器对HTTP网站的警告提示

    2020/03/29
  • window.location.href的用法(动态输出跳转)基础指南_js知识教程视频

    javascript中的location.href有很多种用法,主要如下。self.location.href=”/url” 当前页面打开URL页面location.href=”/url” 当前页面打开URL页面windows.location.href=”/url” 当前页面打开URL页面,前面三个用法相同。this.location.href=”/url

    2020/04/05
  • 33-js-concepts小白指南_每个JavaScript开发人员应该知道33个概念

    33-js-concepts小白指南 官方网址:https://github.com/stephentian/33-js-concepts GitHub:https://githu…

    2020/03/10
  • nodejs如何调用其他的js文件内容?使用指南_文件小白攻略

    将其他js文件与nodejs文件放在同一目录下,然后在nodejs文件中使用require(‘js文件路径’);将其他js文件引入到nodejs文件中,就可以直接调用其他js文件内容了。nodejs调用其他的js文件内容的方法如下:基本语句require(‘js文件路径’);使用方法给大家举个简单的栗子(假设fun1,fun2,fun3文件在同一个目录下)f

    2020/03/24
  • 被嫌弃的程序员的一生使用攻略_程序员基础知识入门

    本文转载于100offer公众号(ID:im100offer)。100offer是一个帮助高端人才找工作的平台,长期关注互联网行业动态与职业发展。 程序员从早前的一种职业发展至今,俨然已经成为大众眼中的「特殊物种」。关于程序员的调侃与段子也盛产于网络,常常引起全网围观。但是程序员说到底并不是「两耳不闻窗外事,一心只用敲代码」,他们也有生活和工作上的烦恼与曲

    2020/03/30
  • nginx做http向https的自动跳转基础入门_nginx小白指南

    在访问百度时,在浏览器输入www.baidu.com会自动跳转到https://www.baidu.com不用人工干预,nginx也可以做这样的自动跳转!首先让nginx服务器监听两个端口,分别是80端口和443端口,注意监听443端口的时候需要配置证书的认证以及创建自签名证书!关于证书的认证的以及创建自签名的证书,不再叙述,这里只说明nginx的配置问题!

    2020/04/03
  • 单向数据流和双向数据流入门攻略_数据使用说明

    vue 与 react
    react的特色是单向数据绑定;而vue中的特色是双向数据绑定。不过vuex和redux这两个状态管理器都是提倡单向数据流来管理数据。只不过vue为了众多UI控件的考虑提供了双向数据绑定的方式,这样在一些需要实时显示用户需求的时候会非常方便。
    单向数据流state:驱动应用的数据源。view:以生命方式将state映射到视图。acti

    2020/03/20
  • 前端布局方式汇总及概念浅析入门攻略_布局入门基础教程

    一、基础布局方式0. 普通/文档流 布局早期

    , 后来 ,再后来 HTML5 语意化标签按照自上而下的方式顺次排布。1. Float 布局 float: left/right最初设计目的是用于图文环绕排版、不过目前常用于左右布局。2. 绝对布局 position: absolute,position: fixed保持与目标元素(po

    2020/04/05
  • 处理高并发的一般思路菜鸟知识_并发菜鸟教程下载

    前言今天看见有人聊目前系统有2亿的PV,该如何优化?当我看到这个话题的时候,突然在想自己工作中也遇到了不少高并发的场景了,所以即兴发挥,在这里简单总结和分享下,欢迎指正和补充。正文读操作关于读,我们一般遵循如下优先级:优先级技术方案说明示例最高尽可能静态化对实时性要去不高的数据,尽可能全走CDN例如获取基础商品信息高就近使用内存优先级服务器内存、远程内存服务

    2020/03/30
  • awesome-blockchain-cn基础知识教程_一个区块链学习的 github 项目

    awesome-blockchain-cn基础知识教程 官方网址:https://github.com/chaozh/awesome-blockchain-cn GitHub:ht…

    2020/03/06
  • xo菜鸟指南_JavaScript happiness style linte

    xo菜鸟指南 GitHub:https://github.com/xojs/xo 简介描述:JavaScript happiness style linte rOpinionate…

    2020/03/06
  • nodejs是单线程吗?基础入门_线程使用帮助

    node.js采用单线程异步非阻塞模式。它的单线程指的是自身Javascript运行环境的单线程,Node.js并没有给Javascript执行时创建新线程的能力,通过Libuv以及它的事件循环来实现异步。node.js的性能不是最高的,因为javascript引擎的关系,node.js默认是单线程,一个node.js应用无法利用多核资源。不过有第三方库提供

    2020/03/22