ウェブサイトのモバイル版を作成していますが、スマートフォン専用です。デバイスがタブレット、ノートブック、ネットブック、デスクトップ、または同様のデバイスである場合、ユーザーが自動的に完全なサイトにアクセスできるようにしたいと考えています。単純な CSS であれば、その方法を知っているでしょう。ただし、モバイル バージョンはフルサイト バージョンとは異なるテンプレートとスクリプトを使用するため、単純に別のスタイルシートを使用するのではなく、それに応じてリダイレクトする必要があります。
上記のデバイスを検出し、それに応じてリダイレクトする方法を示すことができる提案や記事はありますか?
これを行う唯一の方法は、次のハックでした。
css メディア クエリを使用して、max-device-width を使用して電話を検出しました
これに基づいてスタイルの変更を設定します - ボディカラーを #000000 から #000001 に変更しました
OnLoad を使用して Javascript を呼び出し、ボディの色を確認します。
これに基づいてリダイレクトします。(私自身の場合、リダイレクトを強制するのではなく、実際に window.confirm 呼び出しを使用して、ユーザーに選択肢を提供しました)。
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Phone test</title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
body
{ color: rgb(0, 0, 0);}
@media screen and (max-device-width:600px), screen and (max-width:600px)
{
body{ color: rgb(0, 0, 1);}
}
</style>
<script type="text/javascript">
<!--
function doPhoneCheck()
{
var col;
if(document.body.currentStyle)
{
col = document.body.currentStyle.color; // IE
}
else
{
col = getComputedStyle(document.body).getPropertyValue("color");
}
if(col =="rgb(0, 0, 1)")
{
window.location.href="http://www.apple.com/";
}
}
//-->
</script>
6+ までのすべての iPhone と、私がテストした Android および Windows フォンを検出します。これは、現在のすべての iPad と、私が試したラップトップとデスクトップを区別します。
注意
(1) 色については、rgb を使用し、記載されているとおりにスペースを残す必要があります。
(2) 同様のコードが何らかの理由で body background-color を検出しないことがわかりました。
(3) css スタイルを検出するための鍵は、getStyle() ではなく getComputedStyle() (IE の場合は currentStyle) を使用することです。
(4) 本体の色の変化は目に見えませんが、すべての CSS クラスなどに色を指定することで上書きできます。