ブラウザがモバイルであるかどうかによって、Webページの列を分割するにはどうすればよいですか？

Question

私は主にAndroidとiPhoneのデバイスで表示するように設計されたサイトを持っています。ただし、デスクトップやラップトップからWeb上で見ることができるのはもちろんです。

サイトは現在、ほとんどのハンドヘルドデバイスに対応するため、幅320ピクセルのスキニー幅になるように構築されています。実際、私はレイアウトが気に入っているので、デスクトップ上の人々がハンドヘルドと同じインターフェースを見ていることは気にしません。私はデバイス間のインターフェースの一貫性が気に入っています。

私が理想的にやってみたいのは、大型モニターでサイトを見ている人のための追加情報表示です。そのような：

私はダウンロードまたはモバイルデバイスに提供されてからインタフェースBを防ぐ方法であるにこだわっているキーポイント。私は余分なDIVを作成し、ブラウザの識別に基づいてCSSを使用してそれを隠す方法を知っています。しかし、さまざまな理由から、インターフェイスBが一部のデバイスから隠されているだけでなく、データも転送されないことが重要です。

これは可能ですか？

理想的なソリューションには、以下の注意事項を含める必要があります。

• デフォルトでは、デバイスを仮定することで、「スニッフィングブラウザは」高確実に戻ってくる場合にのみ、モバイルのみ提供インタフェース A.ある デバイスが既知のデスクトップブラウザの特定の白の リストであることを確認してから、インターフェイスBを表示してください。

• サーバ側で動作するソリューションです。モバイルで であると思われる場合は、 からのデータは転送されません。

• インタフェースAとBは、フレーム、div要素、のiFrameで分離することができます...私はそれについてとらわれない んだけど、私はので、2つの異なるdiv要素で がより容易であるかもしれないそれらを持つ、CSSに精通してい私は把握する。あなたが最新のphp_browscap.iniする必要があるかもしれません 「get_browser」の>使用「ismobiledevice」フィールドが、あなたはそれがhere ちょうどのために、単純なif文を作る得ることができます -

Answer 1

第二のdivを隠し、「フォールバック」JSを持っている）

2（あなたは私が意味を正確に理解していない場合は、教えてください）（）とにかく空でなければなりませんすべてが、しかし、CSS 3 Media Queriesは "Interface B"が適合しているかどうかを調べ、AJAXが表示されている場合にのみコンテンツをロードします。このような

何か：

<style type="text/css"> 
    @media only screen and (max-width: 320px) { 
    #interface-b { 
     display: none; 
    } 
    } 
</style> 

<script type="text/javascript"> 
    // Using jQuery for convience here 
    // Let #interface-b be empty originally, 
    // and load it's content with AJAX only if needed. 
    jQuery(function() { 
     if (jQuery("#interface-b").is(":visible")) { 
     jQuery("#interface-b").load(...); 
     } 
    }); 
</script> 

（EDIT：優れた後方互換性のためにonlyキーワードを追加しました）

Answer 2

1）http://us.php.net/get_browserをチェック次にdivを印刷するかどうかを評価します。私がスニッフィングブラウザを使用していないだろう