PCからSPページへリダイレクト

2021年11月22日 2021年12月27日

美穂応利

レスポンシブではなく、PCページとSPページで別の表示をさせたい、別のタグを入れたいなど同じ商品でありながら別の見せ方をしたい時があります。
その時に便利なのがリダイレクト設定になります。

■リダイレクトを使うのはこんな時
①PC画面のデベロッパーツールからスマホ画面に切り替えてスマホモードで確認したい時
②PC画面のURLを保存して、同期したスマホから確認する時

上記の場合、リダイレクトを設定しないとSPで見てるのにPCページのレイアウトのままになり
見づらいページになってしまいます。
そこでリダイレクト設定を使い、自動で切り替えてレスポンシブのような効果を発揮できるようになります。

■スクリプトをコピペしてリダイレクトしたいページに埋め込み

<script type="text/javascript">
    if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('Android') > 0) {
        location.href = '飛ばしたいSPページのURL../_sp/';
}
</script>

①上記スクリプトをコピーしてリダイレクトさせたいPCページの<head></head>の中にペーストします。
②'飛ばしたいSPページのURL../_sp/'　この部分にSPページのURLを入力します。

if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('Android') > 0)
ここの部分はiPhone、iPad、Androidで見た時の指示です。

この記事を書いた人

美穂応利