android - 背景在 iPad/Android 上无法正常显示

Question

我的网站在大多数浏览器上显示正常，但我在 iPad 和 Android 浏览器上有两个不同的问题。

1. 最初网页以 1-1 的比例显示，而我希望访问者看到整个网页。
2. 背景显示不正确。当我缩小时，似乎只加载了部分背景。

我用过:

<meta name="viewport" content="width=device-width">

对于初始缩放和:

div.background {
    width: 100%;
    background: #ffffff url('../img/background_first.jpg') center top no-repeat;
}

为背景。我事件试图添加:

-webkit-background-size: 1500px 1000px;
background-size: 1500px 1000px;

但背景问题(这是我主要关心的问题)仍然存在。有什么想法吗？

Answer 1

尝试给你的 .background 一个固定的宽度。

100% 宽度是容器的 100%，在本例中是 body。在移动设备上，body 比在桌面设备上小得多，导致背景图像被裁剪。

同时尝试在你的 `meta viewport`` 中给出一个固定的宽度

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