html - 媒体查询、移动 Img 渲染和 Android CSS 渐变问题

Question

在其他人的帮助下，我构建网页已有一段时间了，而我才刚刚开始使用媒体查询。

我一直遇到的问题是，我的其中一张图片，特别是我网站上的背景图片，无法在移动设备上加载。但是在浏览器上，图像加载得很好。我已经查看它是否是地址问题，但那里一切都很好。我曾尝试使用百分比，但还是没有成功。

我确实收到了文本的替代消息，然后在丢失的图像中间有一个小问号。

另一方面，当再次浏览我的页面时，CSS3 graidients 无法在 android 上加载我不知道是什么问题，它们在桌面上运行良好。

如能就这些主题提供任何帮助，我将不胜感激，这将减轻我的头痛。

My webpage

** 解决方案 **

iOS 无法加载核心尺寸超过 1500 像素的图像。 还加了

-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;

Answer 1

检查你的控制台，它说:

值“设备宽度；”键“width”无效，已被忽略。

查看相关的 html 元标记后，我发现您正在使用 ; 进行分隔。错了，用 , 代替:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

编辑

当您使用 xHtml 时，请确保避免常见的 CSS 错误。

CSS validator

更正以下内容:

第 60 行:font-family: "Trebuchet MS", Helvetica, sans-serif;

第 94 行:删除 ,

第 179/180 行:使用 : 而不是 =

第 338 行:font-size: 16px; 你需要 - 并指定一个单位

第 430 行:position: relative; 而不是 position: relative;