html - DIV 背景图像在智能手机上不是 100%

Question

我开发了一个小网站 - luxorclub.ru/en。在“菜单”部分，有一个瓶子图像，它应该是 100% 的 repeat-x。它在台式机上看起来不错，但在智能手机上并不是 100%。

这是它在桌面上的样子

这是它在 Galaxy S6 上的样子

CSS:

#outer-menu-food {
    width: 100%;
    height: 700px;
    background: url('images/menu/menu-bg3.png') repeat-x;
    background-position: center;
}

Answer 1

这是因为#outer-menu-food 占据了视口(viewport)的宽度，背景只会拉伸(stretch)到那个点。您可能需要重组网站的所有内容才能在移动设备上正确显示。就像在特定分辨率之后删除您作为宽度和东西给出的固定值并考虑给它百分比​​值。

简而言之写media queries修复移动设备上的问题。