我为我们的社交俱乐部创建了一个新页面,但遇到了一些问题。这是一个采用单页设计的响应式网站。在简介部分,只有一张带有简单 Logo 的背景图片。
现在在 android 和大多数 pc 浏览器上一切看起来都不错,但是 iphone 浏览器以某种方式显示背景图像已缩放。
有人知道解决方法吗?
您可以在http://juku-tbg.de/ 上自己尝试
Chrome 屏幕截图:-> 确定
Chrome 上的 Iphone 模式:-> 确定
Android 设备的屏幕截图:-> 确定
iphone 5s 上的屏幕截图:-> NOK
非常感谢。
最佳答案
background-attachment: fixed
在移动版 Safari 中存在错误。对于修复,请使用单独的容器并将 position: fixed
应用于它。
#bg {
background-image: url('path/to/img.jpg');
background-attachment: scroll;
background-position: center top;
background-repeat: no-repeat;
display: block;
width: 100%;
min-height: 100%;
z-index: -100;
position: fixed;
top: 0;
left: 0;
}
关于javascript - iPhone 响应式设计错误的 CSS 解决方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37484344/