2011-07-08 3 views
4

モバイルデバイスから簡単にアクセスできるようにするクライアント用の小さなウェブショップを開催します。モバイルブラウザの検出とフォーマットに関するベストプラクティス

ユーザーがモバイルデバイスから自分のサイトを閲覧しているかどうかを検出するにはどうすればよいですか?

私は、必要がある私行っている:ユーザーが別のサイトに転送し、モバイルデバイスを持っているとあれば

  1. チェック! 私は利点があることだと思う:(。例えば、移動のためのjQueryのモバイル)

    • 私は私は2つのサイトで異なる技術を使用することができる画面サイズ
    • のために両方のサイトからレイアウトを最適化することができ
    • 私は必要があります。サイズ=>tutsplus 上のように私には利点があることだと思う別の画面のためのCSSを使用します一つのサイトが、小さなウェブショップ
+0

が重複する可能性の異なる言語のカップルでAPIが付属しています](http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser) – Liam

答えて

0

jQueryのモバイルについて話すとき、それは私の仕事の山にいるようだが、今ベータ1に現在あります。ベータ2は1ヶ月以内に終了する予定です。現時点ではかなり安定しており、その中から「ベストプラクティス」とみなされるものについて多くの知識を得ることができます。 JQuery Mobileもサポートするさまざまなプラットフォームの画面サイズにメディアクエリを使用できます。

http://jquerymobile.com/

3

理想的には、非モバイルデバイス用に独自のCSSとJavaScriptでjQuery Mobileページの構造を使用してみてください。

あなたができる簡単detect user's browserと条件付きスクリプトはHTML5のとおり含まれては、[定型]:iPhoneユーザーを狙っする際に考慮すべき3

/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome) 
consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ 
@media screen and (max-device-width: 480px) { 

主なもの:

  • 何の重要なフラッシュオブジェクトがありません確実 多くのモバイルブラウザでは (まだですか?何 ホバー/ダブルクリックを意味しない何のマウス カーソルがありませんことを念頭に置いて)
  • ビューポートメタタグを使用して
  • 適切な画面サイズ()
  • 維持は、利用可能な任意の マウスドラッグジェスチャーは、タッチデバイス
  • 上 異なっています
  • に代わる
  • テストすべてのJavaScriptとCSSのよう javascriptのモーダルdivを使用し、すべてのポップアップが新しい タブで開いていると、メインウィンドウと同じ 時に見られることはありません覚えていますこれらのほとんど

(Safariは、最新のCSSプロパティの-webkit-接頭 が必要です)
  • ご のウェブサイトのためのホーム画面のアイコン(あると便利なもの)を作成し、すべてが同じ を見て、動作することを確認物事はあなたがそれを使用しない場合は、すべてのjQueryを必要としない方法を説明しますするなど

  • 1

    コーディング/チュートリアル/ビデオ用Safari Dev Centerを見てhere

    を覆われています。私たちはしません。それに何か悪いことはありません。

    2番が最適です。最初にモバイルを念頭に置いてサイトを作成すると、モバイル画面に縮小しようとするよりもはるかに簡単にデスクトップを展開して操作することができます。

    +0

    jQuery(モバイル)は単なる例です。あなたがモバイルデバイス用のサイトから始め、ユーザーの画面幅がそれより大きいと480pxなどのフォーマットを変更すると、モバイルをサーフィンするときに別のユーザーエクスペリエンスがあるように見えます – Dante

    2

    には、いくつかのオプションがありますが、これは私のお気に入りです:

    が同様に携帯電話のブラウザを検出[の

    関連する問題