我的 bootstrap 网站图片在上传到服务器后无法在移动设备上正确显示

Question

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

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

<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

水平滚动条是您从右侧飞入的页脚表单。它应该被包裹在一个隐藏溢出的容器中。这样就解决了。

我没有看到任何拉伸图像（但我没有 iOS 可以检查）。抱歉。

Answer 2

我通过在正文中添加 overflow-x: hidden

解决了白色问题 space

我的 bootstrap 网站图片在上传到服务器后无法在移动设备上正确显示

My bootstrap website images are not showing correctly on mobile devices after uploading to the server

html

css

mobile-website

responsive-design

twitter-bootstrap