Question

我用bootstrao制作了这个网站 - andamios.cl 它在桌面上非常完美。我通过chrome的不同视口检查了它。它作为一个完整的响应网站工作正常，但当我上传到服务器并使用iphone和ipad访问该网站。一些图像被拉伸，一些图像没有显示。但在Android设备上，我可以说几乎没有（图像显示）但不完美。在PC上，它是完美的。完成项目后我也看到了一个水平滚动条。我的意思是页面右侧有一些空白区域。

我主要使用容器和容器流体。我也使用了这个元标记 -

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

我不确定是什么原因造成的。谢谢你的帮助。

我正在添加其中一个图像没有在iphone和ipad上显示。

#banner {
    height: 100%;
    background: url('/Images/3.jpg')fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}

Answer 1

我通过向body添加overflow-x：hidden来解决了空白问题

Answer 2

水平滚动条是从右侧飞入的页脚形式。它应该被包装在一个隐藏溢出的容器中。这将解决它。

我没有看到任何拉伸的图像（但我没有要检查的iOS）。对不起。

上传到服务器后，我的引导程序网站图像在移动设备上无法正确显示

2 个答案: