11

同じ HTML を使用しながら、提供先のプラットフォームに最適な方法で「ウィジェット化」する 1 つのサイトが必要です。

クライアントでモバイル デバイス/ハードウェア キーボードを検出し、サイトのモバイル JavaScript または jQuery UI およびデスクトップ エクスペリエンス用のスクリプトと共に jQuery Mobile をロードするかどうかを決定するための標準的な方法はありますか?

以下はそれを行うための合理的な方法のように思えますが、Modernizr.touch がこれを検出する最良の方法であるかどうか疑問に思いますか? 例: 強制的なタッチは、Surface の最適なソリューションではない可能性があります。ハードウェア キーボードもあるかどうかを検出する方法はありますか?

Modernizr.load({
  test: Modernizr.touch,
  yep : ['jquery-mobile.js','mobile.js']
  nope: ['jquery-ui.js','desktop.js']
});

編集：

関連する Modernizr バグがいくつか見つかりました。

私が本当に必要としているのは、デバイスにタッチ機能があるかどうかと、ハードウェア キーボードがあるかどうかの両方を検出する方法だと思います。デバイスの幅を物理単位 (インチ) で検出するための David Mulder の回答をそのプロキシとして使用し、11 インチを超えるものにはキーボードがあると想定できますが、そこには巨大なタブレットがあるに違いありません (または、Google が nexus 12 タブレットをリリースする予定です: ) それは間違った仮定をするところです。

4

4 に答える 4

2

わかりました、これを確認するためのデバイスを今すぐ自由に使用できませんが、次の行に沿って進む方法があります。

DPI は JS から直接計算することはできませんが、

var dpi = 50;
while(window.matchMedia("(min-resolution: "+dpi+"dpi)").matches && dpi<500){
  dpi+=1;
}

次に、このように画面の対角線を計算できるようにすることが可能です

var screendiagonal = Math.round(Math.sqrt(Math.pow(window.screen.availHeight,2)+Math.pow(window.screen.availWidth,2))/dpi)

if (screendiagonal < 4) "phone"
else if (screendiagonal < 11) "tablet"
else "computer"

繰り返しますが、私はこれまでにそのようなことをしたことがなく、特にその最初のコードで間違いがある可能性がありますが、次のようなことは可能であるはずです。

ああ、これはデスクトップでは機能しないことに注意してください。そのため、最終的な dpi が 500 の場合はデスクトップ システムであるかどうかを追加で確認する必要があります (ただし、userAgentこれについても調べることができます)。さらに、これを計算に組み込むために値を把握する必要がある場合-webkit-min-device-pixel-ratioもあります (正しい比率が見つかるまでループして、dpi にこの比率を掛けます)。

于 2013-03-07T13:03:06.760 に答える
0

jQuery UI と jQuery Mobile に慣れていない場合、Twitter Bootstrap Fluid レイアウトは、さまざまなデバイス用に HTML や CSS を変更する必要なく、非常にうまく機能します。これは、Twitter Bootstrap サイトにアクセスして、ブラウザーのサイズを変更することで簡単に確認できます。

一般的に探しているのは、レスポンシブ デザインと呼ばれるものです。CSS メディア クエリと少しの Javascript に基づいており、通常は正しくレンダリングするために IE < 9 のがらくたをマッサージします。私がブートストラップを気に入っているもう 1 つの理由は、あなたの代わりに新しいデバイスのこの「マッサージ」を管理する巨大なコミュニティがあることです。

于 2013-03-12T17:24:19.763 に答える
0

このphpライブラリを試すことができます

https://code.google.com/p/php-mobile-detect/

またはこれはjavascript用です

https://github.com/hgoebl/mobile-detect.js

于 2014-01-20T15:19:11.847 に答える
-4

最も簡単な方法は、対象とするユーザー エージェントを検出し、適切な JavaScript をロードすることです。

function load(src) {
  var doc = document,
    application = doc.createElement('script'),
    script = doc.getElementsByTagName('script')[0];
  application.type = 'text/javascript';
  application.async = true;
  application.src = src;
  script.parentNode.insertBefore(application, script);
}
load(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone|iemobile|tablet|Opera Mobi/i.test(navigator.userAgent) ? 'handheld.js' : 'desktop.js');

デスクトップまたはハンドヘルド デバイスに適切な (javascript) アセットを提供するコンテンツ ネゴシエーションにwurlを使用して、バックエンドがこれを処理できるようにすることは、より適切でコストのかかる方法です(ハンドヘルドの場合は is_wireless_device = true を確認してください)。

于 2013-03-11T11:40:05.293 に答える