Question

[已删除链接]在iPhone上，顶部横幅不会一直拉伸。溶液

继承人截图：！[在此处输入图片说明] [1]

这是CSS ive应用于div：

#banner {
    background-color: #F7F7F7;
    background-size: cover;
    box-shadow: 0 0 30px 2px #DCCFBF inset;
    display: inline-block;
    height: 200px;
    width: 100%;

问题2.在chrome中，当我调整浏览器窗口大小时，底部的两个导航图标会移动（图形设计和社交媒体）。我把它们放在一个容器中试图将它们保持在适当的位置，但它仍然会发生......仅限于镀铬。我意识到整个网站都在移动，但导航中的其他图标会在一段时间后停止，而底部的图标会重叠，看起来很糟糕。有什么建议？

Answer 1

横幅广告不会一直延伸，因为您的内容比移动版Safari视为全宽度更宽。然后它缩小整个页面以适应内容并稍微搁置标题。

请参阅this answer to a similar question

通常通过添加

来修复

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

到<head>

至于图标，Chrome似乎尊重width: 100% {main}上#home的@media查询值（main.css第528行），因为缩小浏览器窗口，而Firefox则没有，保留第一个值width: 1020px（l.91）

两个CSS问题 - 一个只发生在移动设备上，一个发生在Chrome上

1 个答案: