Question

我正在做＆＃34;在建筑＆＃34;页面，它必须是响应。我的页面是：http://sp-marketing.com（或http://sp-marketing.com/sp-marketing.com/）在桌面版中，没有pb。事情是在Android S4中，页面以半屏显示。 enter image description here

我不知道为什么。

这是我的代码。

HTML：

<body>
<div id="container">
    <img src="../templates/sp/images/pill.png"/>

</div>
<div id="footer">
  <ul>
        <li class="tel"><a href="#" > (55) 5663-0490</a> </li>
    <li class="map"><a href="https://goo.gl/maps/3js6p" target="_blank"> Margaritas No 19, Col. Florida Del. Alvaro Obregón</a></li>
    <li class="arobas"><a href="mailto:contacto@sp-marketing.com" target="_blank">contacto@sp-marketing.com</a></li>
    <li class="facebook"><a href="https://www.facebook.com/sp.marketing.mx" target="_blank">/sp.marketing.mx</a></li>
    <li class="twitter"><a href="https://twitter.com/sp_marketing" target="_blank">@sp_marketing_mx</a></li>
  </ul>
  <div align="center"><a href="#">www.sp-marketing.com</a></div>
</div>
</body>
</html>

我的CSS：

    @import url('http://fonts.googleapis.com/css?family=Nunito');
@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family: 'Avenir';
  src: url('../fonts/Avenir.ttc') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}


html, body {
  font-family: 'Avenir', 'Nunito',sans-serif;
  background: url(../images/back_pattern.png) repeat-x center center; 

}
a{
    text-decoration: none;  
    color:#322f31;
    }
#container {
   margin-top:0px;
   min-height:100%;
   min-width:100%;
   margin-left:auto;
   margin-right:auto;
   position:relative;
   text-align:center;
   }
img {
  width: inherit;  /* This makes the next two lines work in IE8. */
  max-width: 100% !important; /* Add  if needed. */
  height: auto !important;    /* Add !important if needed. */
}

#footer {
   position:relative;
   bottom:20px;
   width:100%;
   height:60px;   /* Height of the footer */
   text-align:center;
}

div#footer{ 

}
div#footer ul{
    margin:0px;
    padding:0px;
    list-style:none;
}
div#footer li{
    display:inline-block;
    text-align:center;
    font-size:12px;
}

.tel {
background: url("../images/cel.png") no-repeat 0px 5px; background-size:9px 16px;
padding: 9px 0px 0px 15px;
}
.map {
background: url("../images/map.png") no-repeat 0px 5px; background-size:12px 18px;
padding: 12px 5px 0px 15px;
}
.arobas {
background: url("../images/arobas.png") no-repeat 0px 5px; background-size:15px 15px;
padding: 8px 5px 0px 20px;
}
.facebook {
background: url("../images/fb.png") no-repeat 0px 5px; background-size:15px 15px;
padding: 8px 5px 0px 20px;
}
.twitter {
background: url("../images/twitter.png") no-repeat 0px 5px; background-size:15px 15px;
padding: 8px 5px 0px 20px;
    }

Answer 1

您忘记了网页的视口元标记。

<meta name="viewport" content="width=device-width, initial-scale=1" />

将其添加到页面的头部。

编辑：顺便说一句http://css-tricks.com/snippets/html/responsive-meta-tag/了解详情。

Answer 2

试试这个：

 .container {
width: 800px;
max-width: 90%;

}

img {
max-width: 100%;
height: auto;

}

@media \0screen {
img {
width: auto; /* for ie 8 */
}
}

图像不适应移动屏幕

2 个答案: