固定位置メニュー項目の背景画像があります。デスクトップ ブラウザでは正しく表示されますが、モバイル ブラウザで表示すると引き伸ばされて画像の中央部分のみが表示され、画像は元のサイズの約 4 倍に表示されます。
background-size:cover cover !important; を設定しようとしました。サイズがコンテナを満たすように強制しましたが、それも効果がありませんでした。
モバイルで固定配置とビューポートを使用すると問題があることはわかっていますが、要素を相対配置に設定しようとしましたが、効果はありませんでした。
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; }
背景画像が引き伸ばされ、モバイル ブラウザーでのみ表示される理由がわかりません。これは、背景画像の動作が悪い唯一の場所です。どんな助けでもいいです.私は、これらの行儀の悪い子供たちへの体罰に反対していません!