2 htmlテンプレートfor mobile and web design

Question

申し訳ありませんが、この質問はダムですが、私はそれを自分で解決する方法が不思議です。私は異なる画面サイズに対応するウェブサイトを作成するつもりです。これを達成するために、私は2つのHTMLファイルを作成すると思います.1つはWeb用、もう1つはMobile用です。大画面のデザインは小画面とは異なります。私の質問は、アプリサイトがデスクトップ上か携帯電話上で開いているかどうかをどのように検出することができるので、どのようなhtmlテンプレートをレンダリングするべきかを区別することができます。どんな助けでも大歓迎です。

Answer 1

「レスポンシブな」ウェブデザインは、画面サイズに基づいてCSS（または時にはJavaScript）を使用して変更される単一のレイアウトを指します。

2 htmlレイアウトを作成するのではなく、1に固執してCSSを使用して支援する必要があります。詳細については、この説明のうち

Chrck：http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

Answer 2

私は本当に代わりに2を有していると、このようなbootstrapとしてCSS応答フレームワークを使用するためのアドバイスがちょうどそれが起因して持つことに多くの時間がかかります維持し、ファイルを分離しますコードを2回変更してください。

は、しかし、あなたはまだあなたがブラウザの幅を検出するために、JavaScriptを使用することができ、このルートを下るしたい場合は、その結果に依存しますがm.domainのようなサブドメインへの2つのオプション

1. リダイレクトを持っています。 comの
2. は、最初のオプション

   if (document.body.clientWidth > 767) { 
       window.location = "http://m.yourdomain.com"; 
   } 
   

   01のためにあなたが

たいテンプレートのページのHTMLコンテンツを交換してください第二の選択肢については

if (document.body.clientWidth > 767) { 
    $('body').html(your template content here); 
}