制作手机版网站的时候，除了页面简洁、操作方便等访问者可以看到的地方以外，就是
Meta 标签的设置，合理设置 Meta 标签 对手机版网站的搜索引擎优化，手机浏览器的渲
染展示都有非常大的帮助。对于桌面平台 web 布局中大家对 meta 标签再熟悉不过了，它永
远位于 head 元素内部，对做 SEO 的朋友一定对 meta 有种特殊的感情吧，今天我们就来说
说移动平台的 meta 标签，在移动平台 meta 标签究竟有哪些神奇的功效呢？
1、Meta 之 viewport
说到移动平台 meta 标签，那就不得不说一下 viewport 了，那么什么是 viewport 呢？
viewport 即可视区域，对于桌面浏览器而言，viewport 指的就是除去所有工具栏、状态
栏、滚动条等等之后用于看网页的区域
。对于传统 WEB 页面来说，980 的宽度在 iphone 上显示是很正常的，也是满屏的，但
对于 webapp 而言，可能就有点问题了，在 iphone 上我们的 webapp 在竖屏下通常宽度都是
320，这时我们 320 页面在 iphone 上显示成啥效果呢？有人可能认为 iPhone 不是 320 的宽度
莫，感觉应该是满屏的吧，事实呢？我们来看一下如下布局在 iPhone 上的显示情况
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Meta Viewport</title>
<style type="text/css">
div,body{
padding:0;
margin:0;
}
body{
padding-top:100px;
color:#fff;
}
div{
width:320px;
height:100px;
margin:0 auto;
background:#000;
text-align:center;
font:30px/100px Arial;
}
</style>
</head>
<body>
<div>
AppUE
</div>
资源评论
