モバイルテンプレート「ウェブバージョンを表示する」をアイコンにする方法

iPhone 4's Retina Display v.s. iPhone 3G
モバイルテンプレート「ウェブバージョンを表示する」をアイコンにする方法を紹介します。

photo credit: Yutaka Tsutano via photopin cc



レスポンシブWebデザインのサイトに「デスクトップ表示」ボタンが必要な2つの理由を読んで、非表示にしていた「ウェブバージョンを表示する」を復活させてみました。前から外すのはあまり良くないなと思っていたわけですが、色々カスタマイズしているうちにここら辺のレイアウトが崩れてしまったので、非表示にしていました。


ということで、面倒なのですが、やってみました。 mobile-desktop-linkとでも検索し、その辺りをカスタマイズします。新たに、 mobile-footermobile-buttonを作ることにしました。


<div class='mobile-desktop-link'>
<!--###"PC版を表示する"を消す
<a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
###-->
</div>
</div>

<div class='mobile-footer'>
<div class='mobile-button'><a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a></div>
</div>


CSSは以下のように書きました。

.mobile-footer {
margin:0 auto;width:100%;overflow:hidden;
}

.mobile-button a {
background: #06c;
border: 1px solid #CCC;
text-align: center;
color: #ffffff;

}
.mobile-button a:hover {
background: #ccc;
color: #fff!important;
}


ちなみに、 margin:0 auto;width:100%;overflow:hidden;とすることで、モバイルサイト閲覧時にバウンドしなくなります。