MoBirth Tips

スマートフォンでの表示選択

解説

スマートフォンでは携帯と違い画面サイズの大きい機種やピンチアウトによる拡大表示が可能なため、 携帯用に変換されたサイトではなくPC用のサイトをそのまま表示しても問題なく閲覧することが可能となっておりますが、 当サイトで解説しているリダイレクトの設定を行なうと携帯用サイトに転送されてしまいます。

そこで、最近良く見かけるJavaScriptによる表示サイトの確認画面(下記画像参照)を表示し、 訪問者がどちらのサイトを表示するかを選択できるようになります。

※携帯電話ではJavaScriptが動作しないため、携帯電話だけをリダイレクトで携帯サイトへ転送する必要があります。
一部タブレットで仕様上対応しない場合がございます。 Android版のFireFoxはPC用ページで閲覧下さい。

表示選択画面

設定方法

1、下記ソースの箇所をお客様の情報に書き換え、PCサイトの<body>と</body>の間に
挿入してください。

zipファイルのダウンロードはこちら(ver.2.3)

2、●●●● を お客様の携帯サイトのURLへ書き換え
例) http://sample.mobirth.com

<!--表示選択v2.3-->
<div class="Mobirth_Delete">
<script type="text/javascript">
function windowAddEventListener(callback) {
if (window.addEventListener) {
window.addEventListener('load', callback, false);
} else if (document.attachEvent) {
window.attachEvent('onload', callback);
}
}

windowAddEventListener(function() {
var agent = navigator.userAgent;
if (agent.indexOf('iPhone') != -1
|| agent.indexOf('iPod') != -1
|| (agent.indexOf('Android') != -1 && agent.indexOf('Mobile') != -1 && agent.indexOf('AppleWebKit') != -1)
)
{
if(confirm('スマートフォン用のサイト表示しますか?\n(キャンセルの場合はPCサイトを表示します。)')) {
location.href = 'http://●●●●' + location.pathname;
}
}
});
</script></div>

注意事項

リダイレクトの設定を行なっている場合はそちらが優先されるため、
この方法での選択を表示する場合は、リダイレクト設定からスマートフォンの判別を削除する必要があります

<div class="Mobirth_Delete">を使用して変換後サイトで非表示処理を行わないと選択肢が逆となり無限ループとなります

PCサイト用のGoogleAnalyticsを導入している場合は、表示選択のタグの後にGoogleAnalyticsのタグを設置ください。

▲ このページのTOPへ