媒体查询,移动Img渲染& Android CSS Gradient问题

时间:2014-01-27 11:01:25

标签: html css css3 media-queries

我现在已经在其他人的帮助下建立了一个网页,我刚刚开始使用媒体查询。

我一直在体验的问题是,我的一张图片,特别是我网站上的backgorund图片,不会加载到手机上。但是在浏览器上,图像加载完全正常。我已经看过它是否是一个地址问题,但一切都很好。我试图使用百分比,但仍然没有运气。

我确实收到了文字的替代信息,然后是丢失图像中间的一个小问号。

另一方面, CSS3 graidients在再次浏览我的页面时无法在Android上加载我不知道问题是什么,它们可以在桌面上正常工作。

对这些主题的任何帮助都会非常感激,并且会让我头疼。

My webpage

**解决方案**

iOS无法加载核心大小为1500px以上的图像。 还添加了

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

1 个答案:

答案 0 :(得分:2)

请查看您的控制台:

The value "device-width;" for key "width" is invalid, and has been ignored.

在查看相关的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;代替postion: relative;