布局不是全屏

这是微信里面跳转过去的,但页面怎么这么小?并不是全屏幕的,为什么?
下面是页面代码

@{
Layout = null;
}

<!DOCTYPE html>

 <script>
     //提交人数
     function nfSend() {

         var chk_value = [];//定义一个数组    
         $('input[name="checkbox"]:checked').each(function () {//遍历每一个名字为interest的复选框，其中选中的执行函数    
             chk_value.push($(this).val());//将选中的值添加到数组chk_value中    
         });

         if (chk_value==0) {
             alert('请至少选择一项'); return false; 
         }

         if (confirm('确定【@ViewData["today"]】【' + chk_value + '】？')) {
             var wxuser_id = $("#wxuser_id").val();
             jQuery.ajax({
                 url: "/weixin/dinner?wxuser_id=" + wxuser_id + "&chk_value=" + chk_value + "&dinnerTime=@ViewData["today"]&time=" + new Date().toString(),
                 type: "Get",
                 cache: false,
                 async: false,
                 success: function (msgContent) {
                     if (parseInt(msgContent) > 0) {
                         alert('提交成功,请返回');
                     }
                     else {
                         alert('提交失败,请联系电话27406651');
                     }
                 }
             });
         }
    }
</script>

</head>
<body>

<div class="am-form-group">
  <label for="doc-vld-name"><label for="doc-select-depart">【@ViewData["name"]】【@ViewData["today"]】</label></label>
  <label class="am-checkbox">
  <input type="checkbox" name="checkbox"  value="早餐" data-am-ucheck> 早餐
</label>
    <label class="am-checkbox">
  <input type="checkbox" name="checkbox"  value="中餐" data-am-ucheck> 中餐
</label>
    <label class="am-checkbox">
  <input type="checkbox" name="checkbox"  value="晚餐" data-am-ucheck> 晚餐
</label>
</div>
    <input id="wxuser_id" value="@ViewData["userid"]" hidden />
<p><button type="button" class="am-btn am-btn-default" onclick="nfSend();">提交</button></p> <span id="info"></span>

</body>
</html>

一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的）。

移动端需要meta声明。
在头部加上：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

参数解释：
width - viewport 的宽度
initial-scale - 初始的缩放比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

1.不是全屏是因为微信限制，所有网页打开都是带有导航栏的。
2.字小是因为你的html布局不适配手机屏幕，如果想快速适配，有一个不错的方案，使用Bootstrap，栅格系统可以让你很容易地在手机适配出合适的比例。

在head加上<meta name="viewport" content="width=device-width, initial-scale=1">

【热门文章】