首页 > 为什么html设了width:100%,移动设备测试宽度并不是100%?

为什么html设了width:100%,移动设备测试宽度并不是100%?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>最新活动</title>
  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <style type="text/css">
      html,body{
        width: 100%;
        height: 100%;
        margin:0px;
        padding: 0px;
        font-family: '宋体';
      }
      .main{
        width: 100%;
      }
      .main .item{
        margin-bottom: 40px;
        border-bottom: 1px solid #e3e3e3;
      }
      .main .item .detail .title{
        font-size: 56px;
        color:black;
        margin-left: 40px;
        line-height: 120px;
      }
      .main .item .detail .content{
        color:#737373;
        font-size: 40px;
        margin-left: 40px;
        margin-bottom: 40px;
      }
      .return_home{
        position:fixed;
        z-index:999;
        left:10px;
        bottom:30px;
      }
      .return_home img{
        width:140%;
      }
  </style>
</head>
<body>
  <div class="main">
     <div class="item">
        <div class="a-img">
          <img style="width:100%" class="img-responsive" src="\static\img\newactivity\1.jpg">
        </div>
        <div class="detail">
          <div class="title">活动题目</div>
          <div class="content">关键字</div>
        </div>
     </div>

     <div class="item">
        <div class="a-img">
          <img style="width:100%" class="img-responsive" src="\static\img\newactivity\2.jpg">
        </div>
        <div class="detail">
          <div class="title">活动题目</div>
          <div class="content">关键字</div>
        </div>
     </div>

     <div class="item">
        <div class="a-img">
          <img style="width:100%" class="img-responsive" src="\static\img\newactivity\3.jpg">
        </div>
        <div class="detail">
          <div class="title">活动题目</div>
          <div class="content">关键字</div>
        </div>
     </div>
  </div>

<!-- 底部返回首页按钮 -->
  <div class="return_home" onclick="location.href='/m/index/'"><img src="/static/img/accounts/home.png"></div>

</body>
</html>

已解决:加<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">


移动端需要加

<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
【热门文章】
【热门文章】