很多时候因为手机尺寸原因无法显示所有想显示的信息，可采用此方法解决（注：多数用于菜单按钮）
ViewPort <meta>标记用于指定用户是否可以缩放Web页面
ViewPort <meta>标记还表示文档针对移动设备进行了优化
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta charset="utf-8" />
<title>布局</title>
<style>
html {
width: 320px;
}
body {
width: 320px;
}
#wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
overflow: scroll;
}
#wrapper ul {
padding: 0;
width: 1290px;
height: 60px;
font-size: 0;
}
#wrapper ul li {
display: inline-block;
width: 95px;
height: 60px;
color: #fff;
font-size: 12px;
list-style-type: none;
background-color: red;
}
#wrapper ul li.active {
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<ul class="j-nav">
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
<li class="j-spe">导航6</li>
<li>导航7</li>
<li>导航8</li>
<li>导航9</li>
<li>导航10</li>
<li>导航11</li>
<li>导航12</li>
<li>导航13</li>
</ul>
<ul class="j-nav">
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
<li class="j-spe">导航6</li>
<li>导航7</li>
<li>导航8</li>
<li>导航9</li>
<li>导航10</li>
<li>导航11</li>
<li>导航12</li>
<li>导航13</li>
</ul>
</div>
</body>
</html>