我有固定位置菜单项的背景图像。它们在桌面浏览器上看起来是正确的，但在移动浏览器上显示时，它们会被拉伸，只显示图像的中心部分，并且图像看起来大约是原始大小的4倍。
我尝试过设置背景大小：封面！重要的以迫使大小填充容器，但这也没有任何效果。
我知道在移动设备上使用固定定位和视口存在问题，但我尝试将元素设置为相对定位，但没有效果。
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; }
我不明白为什么背景图像会被拉伸，而且只能在手机浏览器上显示。这是我的背景图像唯一表现不佳的地方。任何帮助都会很好。。。我不反对体罚这些行为不端的孩子！
引用《HTML/XTML第六版最终指南》：
"如今，HTML和XHTML文档可能会出现在最奇怪的地方，比如就像在移动电话上一样。为了帮助浏览器找出呈现文档的最佳方式，在标签中包括媒体属性。此属性的值为文档的预期媒介，尽管这并不排除其他人的渲染媒体默认值为屏幕（计算机显示）。其他值包括tty（text仅限）、电视（电视）、投影（影院）、手持设备（PDA和手机）、打印（纸上墨水）、盲文（触觉设备）、浮雕（盲文打印机）、听觉（音频；语音合成），以及所有（许多不同类型的媒体）。如果要明确列出几种类型的介质，而不是指定所有介质，请使用以引号括起、逗号分隔的介质类型列表作为介质的值属性例如：告诉浏览器您的文档包含用于打印和计算机的CSS显示。指定介质时要小心，因为浏览器无法应用您定义的样式除非文档是在指定的媒体上呈现的。因此浏览器不会应用我们为media="屏幕，打印"设计的样式示例集例如，如果用户使用手持计算机连接到网络。如何在不创建的情况下为不同的介质创建不同的样式定义你的文件有多份？CSS2标准允许您定义特定于媒体的样式表通过其对@import-at规则的扩展和@media atrule，我们将在本章后面的8.1.5节中对此进行描述。"
PS，试着让你的代码更具相关性：不要使用"px"，而是用百分比指定值。
伙计们，这件事我很糟糕。我有一个CSS文件，它将背景大小改写为预定的像素大小。我从CSS文件中删除了这个属性，一切都很好。
顺便说一句，有人知道有什么应用程序或插件可以让我从移动浏览器中查看页面的CSS吗？类似于内置在桌面浏览器的开发者工具栏？这会让我省去很多头痛。。。