モバイル サイトを持っていますが、ユーザーがモバイル デバイスを使用している場合に、そのサイトにリダイレクトするスクリプトが必要です。
4 に答える
いくつかの方法がありますが、画面サイズを検出するのが良い方法です。画面の幅はブラウザ ウィンドウのサイズとは無関係であることに注意してください。
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>
ユーザー エージェント文字列によって、iPhone や iPod などの特定のデバイスを照合することもできます。
<script language=javascript>
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
location.replace("http://url-to-send-them/iphone.html");
}
-->
</script>
重要な警告
これは機能しますが、特定のページにアクセスしようとすると、モバイル サイトのフロント ページにリダイレクトされるのも非常に面倒です。たとえば、記事にアクセスしようとして Facebook のリンクをたどったときに、サイトがサイトのモバイル バージョンのフロント ページにリダイレクトされた場合、それは腹立たしく、非常に役に立ちません。おそらく、コンテンツを見つけるのに十分な努力をすることはないでしょう。
paulsm4 は正しく、CSS を使用して同じ URL でサイトのモバイル レイアウトを提供する方がはるかに望ましいソリューションです。ただし、それができない場合は、サイトのモバイル バージョンの一致する URL にリダイレクトすることをお勧めします。
たとえば、モバイル サイトに別のサブドメインがある場合、Javascript を使用してモバイル バージョンの正しいページにリダイレクトできます。
<script type="text/javascript">
<!--
// Full URL: http://example.com/articles/1
// Mobile URL: http://mobile.example.com/articles/1
if (screen.width <= 699) {
// Redirect to the same page on the mobile site
document.location.host = "mobile." + document.location.host;
}
//-->
</script>
最初にブラウザを検出する必要があります。javascript を使用したブラウザー検出に関する情報を含むページを次に示します 。これは、この主題に関する非常に役立つページです: http://www.zytrax.com/tech/web/mobile_ids.html には、ブラウザ検出用の php コードも含まれています。
防御の第一線は、CSS を使用することです。
http://www.alistapart.com/articles/return-of-the-mobile-stylesheet
http://perishablepress.com/the-5-minute-css-mobile-makeover/
その手短に、リダイレクトを実行できる Javascript を次に示します。
http://css-tricks.com/snippets/javascript/redirect-mobile-devices/
<script type="text/javascript"> <!-- if (screen.width <= 699) { document.location = "mobile.html"; } //--> </script>
JS でこれを行う必要はありません。HTTP ヘッダーで何かがブラウザに送り返される前に、ブラウザは実際にエージェント文字列を PHP に送信します。を見てください、そうすれば私の$_SERVER['HTTP_USER_AGENT']
言いたいことがわかるでしょう。
CodeIgniter には、この種の動作に役立つユーザー エージェント クラスがあります。そのソースはここにあり、ブラウザ エージェント文字列で使用するリソース ファイルはここにあります。