html 背景图像在桌面浏览器上显示正确，而不是在移动设备上

Question

我有固定位置菜单项的背景图片。 它们在桌面浏览器上显示正确，但在移动浏览器上显示时会被拉伸(stretch)并且仅显示图像的中心部分，并且图像看起来大约是原始大小的 4 倍。

我尝试设置背景大小:封面封面 !important;强制尺寸填充容器，但这也没有效果。

我知道在移动设备上使用固定定位和视口(viewport)存在问题，但我尝试将元素设置为相对定位但没有效果。

HTML: 头:

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

菜单:

<ul id="shortcuts" role="complementary" class="children-tooltip tooltip-right lulus">
<li class="current"><a href="/Home" class="shortcut-dashboard" title="Home">Home</a></li>
<li><a href="/Calendar" class="shortcut-agenda" title="Events">Events</a></li>
</ul>

CSS:

#shortcuts {
display: none;
position: fixed;
z-index: 998;
top: 44px;
left: 10px;
margin: 0;
width: 240px;
list-style-type: none;
padding: 15px 4px 5px 14px;
*padding-bottom: 25px;
border: 1px solid white;
background: #d9d9d9 url(../img/old-browsers/style/bg_shortcuts.png) repeat-x;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(#d9d9d9));
background: -webkit-linear-gradient( white, #d9d9d9 );
background: -moz-linear-gradient( white, #d9d9d9 );
background: -ms-linear-gradient( white, #d9d9d9 );
background: -o-linear-gradient( white, #d9d9d9 );
background: linear-gradient( white, #d9d9d9 );
-webkit-background-clip: padding-box;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
}
#shortcuts > li {
    width: 70px;
    height: 70px;
    float: left;
    margin: -5px 10px 25px 0;
    }
.shortcut-dashboard { margin-left:0px !important; /*padding-bottom:65px; width:70px !important;*/ background-image: url(../img/standard/icons/Home_Icon.png) !important; background-position:center center !important; background-size:cover cover !important; }
.shortcut-agenda { margin-left:0px !important; /*padding-bottom:65px; width:70px !important;*/ background-image: url(../img/standard/icons/Calendar_Icon.png) !important; background-position:center center !important; }

我不明白为什么背景图像会被拉长并且只在移动浏览器上出现。这是我的背景图片唯一表现不佳的地方。任何帮助都会很好...我不反对对这些行为不端的 child 进行体罚!

Answer 1

引自“HTML/XHTML 权威指南第 6 版”:

“如今，HTML 和 XHTML 文档可能出现在最奇怪的地方，例如 就像在手机上一样。为了帮助浏览器找出呈现文档的最佳方式， 在标签中包含媒体属性。该属性的值为 文档的预期媒介，尽管它不排除由其他人呈现 媒体。默认值为屏幕(计算机显示器)。其他值包括 tty(文本 only), tv (电视), projection (剧院), handheld (掌上电脑和手机), print (纸上墨水)，盲文(触觉设备)，浮雕(盲文打印机)，听觉(音频； 例如语音合成)和所有(许多不同类型的媒体)。 如果您想明确列出几种类型的媒体，而不是指定所有类型，请使用 引号括起来的、以逗号分隔的媒体类型列表作为媒体的值 属性。例如: 告诉浏览器您的文档包含用于打印和计算机的 CSS 显示。 小心指定媒体，因为浏览器无法应用您定义的样式 除非文档正在您指定的媒体之一上呈现。就这样 浏览器不会应用我们为 media="screen,print"设计的示例样式集 例如，如果用户使用掌上电脑连接到 Web。 如何在不创建的情况下为不同的媒体创建不同的样式定义 您的文档的多份副本？ CSS2 标准允许您定义特定于媒体的 样式表通过它对@import at-rule 的扩展和@media atrule， 我们将在本章后面的 8.1.5 节中进行描述。”

PS，尝试使您的代码更具相关性:不要使用“px”，而是以百分比形式指定值。