PC端页面布局，在移动端查看头部和底部出现留白

问题出现：body，html未填充满可视区域

页面布局：

<div class="full">
   <div class="margin">

      页面内容
   </div>
</div>

初始化样式：

html, body, div,iframe, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td {
    margin: 0;
    padding: 0;
    font-weight: normal;
}
html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
body { -webkit-touch-callout: none; font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;background: #F4F4F4;}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a { color: #000000; text-decoration: none; cursor: pointer; }
a:hover{ color: #000000;}
li { list-style-type: none;}
em, i { font-style: normal;}
input{ vertical-align:middle;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
input,textarea{ box-shadow: none !important;}
input[type=file]{ cursor: pointer;}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
img,button{ border:0; outline: 0;}
header,section,footer{  display: block; }
input::-webkit-input-placeholder{font-family:"微软雅黑"; color: #909090;}
input:-moz-placeholder{font-family:"微软雅黑"; color: #909090;}
input::-moz-placeholder{font-family:"微软雅黑"; color: #909090;}
input:-ms-input-placeholder{font-family:"微软雅黑"; color: #909090;}

.full{ width: 100%;}
.margin{ width: 1200px; margin:0 auto;}

解决方案：

• 设置body最小宽度

              body{min-width:1200px}

• 若还行不行，设置meta头部  

              <meta name="viewport" content="width=1200, initial-scale=0.66"/>

• 实在不行，使用媒体查询

              @media (max-width: 1080px) {
                  body{
                       width: 1230px;
                  }
               }