Question

我有固定位置菜单项的背景图像。它们在桌面浏览器上显示正确，但在移动浏览器上显示时会变得拉伸并仅显示图像的中心部分，并且图像大小约为原始大小的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; }

我无法弄清楚为什么背景图片会被拉伸，只能在移动浏览器上使用。这是我的背景图片表现不佳的唯一地方。任何帮助都会很好......我不反对对这些行为不端的孩子进行体罚！

Answer 1

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

“HTML和XHTML文档最近可能会出现在最奇怪的地方，例如就像在手机上一样。为了帮助浏览器找出呈现文档的最佳方式，在标记中包含media属性。该属性的值为文档的预期媒介，但不排除其他人的渲染媒体。默认值为screen（计算机显示）。其他值包括tty（文本只有），电视（电视），投影（剧院），手持（PDA和手机），打印（纸上墨水），盲文（触觉设备），浮雕（盲文打印机），听觉（音频; 例如，语音合成）和所有（许多不同类型的媒体）。如果要显式列出几种类型的媒体，而不是指定all，请使用a 引号括起的，以逗号分隔的媒体类型列表作为媒体的值属性。例如：告诉浏览器您的文档包含用于打印和计算机的CSS 显示器。请注意指定媒体，因为浏览器无法应用您定义的样式除非文档在您指定的某个媒体上呈现。就这样浏览器不会应用我们为media =“screen，print”设计的示例样式集例如，如果用户使用手持计算机连接到Web。如何在不创建的情况下为不同的媒体创建不同的样式定义多份文件？ CSS2标准允许您定义特定于媒体样式表通过它扩展到@import at-rule并通过@media atrule，我们将在本章后面的8.1.5节中描述。“

PS，尝试让你的代码更相对：而不是使用'px'，指定百分比值。

Answer 2

我对这个人不好，伙计们。我有一个CSS文件，它将背景大小覆盖到预定的像素大小。我从CSS文件中删除了这个属性，一切都很好。

另外，有没有人知道允许我从移动浏览器查看页面CSS的任何应用程序或插件？类似于内置桌面浏览器的开发人员工具栏？这会让我很头疼......

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

2 个答案: