Javascriptを使ってPCとスマホのhtmlを切り替える方法

スポンサーリンク

Javascriptを使ってPCとスマホのhtmlを切り替える方法

PC用のhtmlとスマホ用のhtmlが用意されている状態で、アクセス時に対応したhtmlに切り替える方法をメモ。個人的には、こういった切り替えはサーバサイドでやるべきだと思いますが、そうもいってられない状況もあったりするのでw

コード

head要素に以下のコードを記載します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>

<script type="text/javascript">
// iPhoneまたは、Androidの場合は振り分けを判断
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
    location.href = 'URLの絶対パスを記述';
}
</script>
</head>
<body>

<h1>PCサイトだよ</h1>
</body>
</html>

URLの絶対パスを記述」と書かれた所に、スマートフォン用のhtmlへの絶対URLを記載します。