javascript - 解像度に依存するモバイル テンプレート

Question

モバイル デバイスでのみ表示される小さなモバイル ページを開発しています。ただし、すべての Android および iPhone デバイスとその解像度に適合する必要があります。

テンプレートには、解像度の変化の比率に応じて縮小するテーブルといくつかの画像が含まれています

私が基本的に必要としているのは、解像度を考慮し、作成するいくつかの異なるスタイルシートから選択するスマート CSS コードのヒントです。

Answer 1

JS を使用して正確なデバイスを検出し、そのデバイスのスタイルシート リンクを生成できます。

//Detect mobile devices
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())),

//Detect only iPhone
iphone = (/iphone/i.test(navigator.userAgent.toLowerCase()));

//Apply stylesheet for mobile devices
if(mobile){
   var cssLink = document.createElement("link");
   cssLink.setAttribute("type", "text/css");
   cssLink.setAttribute("rel", "stylesheet");
   cssLink.setAttribute("href", "css/mobile.css");
   document.head.appendChild(cssLink);
}

//Apply stylesheet for iPhone only
if(iphone){
   var cssLink = document.createElement("link");
   cssLink.setAttribute("type", "text/css");
   cssLink.setAttribute("rel", "stylesheet");
   cssLink.setAttribute("href", "css/mobile.css");
   document.head.appendChild(cssLink);
}

または、Media Query を使用してすべてのモバイル デバイスを検出しますmax-device-width。

@media only screen and (max-device-width: 480px) {
     /* CSS for mobile */
}

max-device-widthに設定していることに注意してください480px。これは、モバイル デバイスの画面測定のためであり、実際のデバイス ピクセルよりも大きい参照ピクセルにあります。たとえば、iPhone 3と4320pxの両方で、横向きモードと縦向きモードの両方でデバイスの幅があります。一部のAndroidデバイスは device width を返します480px。