WEBAPP开发之移动平台的WebApp之Meta标签-职坐标

WEBAPP开发之移动平台的WebApp之Meta标签

白羽 2018-07-19 来源：网络阅读 878 评论 0

摘要：本文将带你了解WEBAPP开发之移动平台的WebApp之Meta标签，希望本文对大家学WebApp有所帮助。

对于桌面平台web布局中大家对meta标签再熟悉不过了，它永远位于head元素内部，今天我们就来说说移动平台的meta标签，在移动平台meta标签究竟有哪些神奇的功效呢？

Meta之viewport
a.含义：viewportt即可视区域，
b.区域范围：对于桌面浏览器而言，viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域,对于传统WEB页面来说，980的宽度在iphone上显示是很正常的，也是满屏的，但对于webapp而言，可能就有点问题了，在iphone上我们的webapp在竖屏下通常宽度都是320，这时我们320页面在iphone上显示成啥效果呢？有人可能认为iPhone不是320的宽度莫，感觉应该是满屏的吧，事实呢？我们来看一下如下布局在iPhone上的显示情况

div,body{
padding:0;
margin:0;
}
body{
padding-top:100px;
color:red;
}
div{
width:100%;
height:200px;
margin:0auto;
background:#000;
text-align:center;
font:30px/100pxArial;
}

AppUE

因此我们必须改变viewport，对应的属性值如下：
c.属性值
width：viewport的宽度（范围从200到10,000，默认为980像素）
height：viewport的高度（范围从223到10,000）
initial-scale:初始的缩放比例（范围从>0到10）
minimum-scale:允许用户缩放到的最小比例
maximum-scale:允许用户缩放到的最大比例
user-scalable:用户是否可以手动缩放
minimal-ui:网页在加载时便可隐藏顶部的地址栏与底部的导航栏
对于这些属性，我们可以设置其中的一个或者多个，并不需要你同时都设置，iPhone会根据你设置的属性自动推算其他属性值，而非直接采用默认值。