移动前端开发基础:meta视口标签以及视口标签属性

王亚兵4个月前 (11-02)web前端基础138

昨天给大家介绍我们移动段开发中的视口,知道了什么是视口,以及了解了视口的三种分类,其中包括了布局视口,视觉视口。还有移动端web前端开发中常用的理想视口。今天我将给大家分享一下我们视口标签如何设置,以及如何设置视口标签的属性

首先我们先了解一下视口i标签的写法,meta标签我想大家都应该见过,他是定义欧文页面元信息的,比如欧文前面提到的seo中重要的三个要素中的两个都是通过meta这个标签定义的。也就是keywords和description属性。今天我们讲的视口标签也是通过meta标签书写的如下:

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

我们来看一下视口标签的方法,name是元信息的名称。viewport就是视口信息名称。content是制定元信息的值。系埋你我就来和大家说下我们content这些属性值。

width是宽度的意思,也就我们视口中的宽度。device-width指的是我们设备宽度。initial-scale初始的视口缩放比,一般情况下都是1.0.minimum-scale是最小缩放比,maximum-scale是最大缩放比。user-scalable是设置我们用户是否可以缩放我们的页面。no就是不可以。当然可以都过0不可以,1可以进行设置。而且我们中间是用英文状态下的逗号进行分割的,下面我们看下具体效果。

meta视口标签以及市口标签属性

我们看一下这是我们加了视口标签时的效果,中间红色的方框的大小就是100像素。但是如果我们把视口i标签注释掉。你会发现页面效果发生了变化。

meta视口标签以及市口标签属性

是不是发现方块在我们页面中显示变小了,这就是我们视口标签的作用。所以我们在进行移动端的web那段开发时一定要设置好我们市口标签。通过本次分享希望大家掌握meta中视口标签的设置,以及视口标签属性的使用。

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。