低解像度のアンドロイドデバイスを検出する

Question

現在のユーザーが低解像度のデバイス（< 320px）を使用していて、そのユーザーに別のスタイルシートをロードしているかどうかを検出できます。そうする方法はありますか？

Answer 1

あなたはスマートフォンのための良いウェブサイトのデザインを構築する方法について説明しているウェブ上の多くの記事を見つけることができます。

あなたのケースに答えるために、あなたがそれを処理するには、いくつかの方法を見つけることができます。

メディアクエリー

CSS3以来、あなたはmax-widthやdevice-widthを使用することができます。以下のようなものを与えるだろう

：

<link rel="stylesheet" type="text/css" 
    media="screen and (max-device-width: 480px)" 
    href="shetland.css" /> 

はJavaScript

あなたは、ブラウザの幅をチェックするためにJavaScriptを使用することができます。ここで

はjqueryのを使用した例である：ここではさらに

を行く

if ($(window).width() < 320) { 
    $("link[rel=stylesheet]").attr({href : "mobile.css"}); 
} else { 
    $("link[rel=stylesheet]").attr({href : "desktop.css"}); 
} 

は、いくつかの興味深いと便利なリンクです：

• Responsive web Design on Smashing Magazine
• Detect Mobile Devices on about.com
• An older article (but where you can find some useful tips too

Answer 2

まあまずあなたがscreen.widthとscreen.heightとモニタの解像度を検出します。

if (screen.width < 320 || screen.height < 320) { 
    .... 
} 

次に、実際にスタイルシートを読み込む必要があります。最も簡単な方法はローダーなどの外にこれを含めることです。その場合はただdocument.writeにすることができます。

if (screen.width < 320 || screen.height < 320) { 
    document.write('<link rel="stylesheet" src="lowres.css"></script>'); 
} else { 
    document.write('<link rel="stylesheet" src="desktop.css"></script>'); 
}