twig画面サイズに基づいてテンプレートを変更するには

Question

私はsymfony2をtwigとbootstrap3で使用しています。私は画面サイズに基づいてテンプレート内の要素の編成方法を変更したいと思います。ここで

は私がやりたいものです。

{# ----------------------------------- LARGE SCREENS -------------------------- #} 
      <div class="visible-lg-block"> 
       {# Emetteur et infos ticket #} 
       <div class="row"> 
        <div class="col-md-6" style="font-size: 12px"> 
         {% include "AtgpTrackerBundle:Ticket:_viewEmitter.html.twig" %} 
        </div> 

        <div class="col-md-6" style="font-size: 12px;"> 
         {% include "AtgpTrackerBundle:Ticket:_viewTicketInfos.html.twig" %} 
        </div>  
       </div> 
        <hr style="padding-top: 0px"> 
       <div class="row"> 
        <div class="col-md-6"> 

         {# Tickets liés #} 
         {% if nblinks > 0 %} 
          {% include "AtgpTrackerBundle:Ticket:_viewLinks.html.twig" %} 
         {% endif %} 

         {# Fichiers associés #} 
         {% if files %} 
          {% include "AtgpTrackerBundle:Ticket:_viewFiles.html.twig" %} 
         {% endif %} 

         {# Description #} 
         {% include "AtgpTrackerBundle:Ticket:_viewDescription.html.twig" %} 

         {# Progression #} 
         {% include "AtgpTrackerBundle:Ticket:_viewProgress.html.twig" %} 

         {# Infos société #}    
         {% if company %} 
          {% include "AtgpTrackerBundle:Ticket:_viewCompanyInfos.html.twig" %} 
         {% endif %} 
        </div>  

        <div class="col-md-6"> 
         {# Messagerie #} 
         {% include "AtgpTrackerBundle:Ticket:_viewMessenger.html.twig" %} 
        </div> 
       </div> 
      </div>  
     {# ----------------------------- SMALL SCREENS ---------------------- #} 
      <div class="hidden-lg"> 
       <div class="col-md-12"> 
        {# Emetteur et infos ticket #} 
        {% include "AtgpTrackerBundle:Ticket:_viewEmitter.html.twig" %} 
        {% include "AtgpTrackerBundle:Ticket:_viewTicketInfos.html.twig" %} 

        {# Messagerie #} 
        {% include "AtgpTrackerBundle:Ticket:_viewMessenger.html.twig" %} 

        {# Tickets liés #} 
        {% if nblinks > 0 %} 
         {% include "AtgpTrackerBundle:Ticket:_viewLinks.html.twig" %} 
        {% endif %} 

        {# Fichiers associés #} 
        {% if files %} 
         {% include "AtgpTrackerBundle:Ticket:_viewFiles.html.twig" %} 
        {% endif %} 

        {# Description #} 
        {% include "AtgpTrackerBundle:Ticket:_viewDescription.html.twig" %} 

        {# Progression #} 
        {% include "AtgpTrackerBundle:Ticket:_viewProgress.html.twig" %} 

        {# Infos société #}    
        {% if company %} 
         {% include "AtgpTrackerBundle:Ticket:_viewCompanyInfos.html.twig" %} 
        {% endif %} 
       </div> 
      </div> 

あなたが見ることができるように、私は私が表示したいブロックを含むどの含まの束を使用しています。 bootstrap "visible" and "hidden" classesを使ってみましたので、画面サイズに基づいてページ内でブロックが編成される方法を変更できます。

ただし、私のインクルードブロックにはフォームとアコーディオンが含まれています。だから私は小さな画面を使用すると、フォームが表示されず、アコーディオンが正しく動作しません...彼らはすでに "大画面"のセクションに読み込まれているので、私は推測します。

この問題を回避する方法はありますか？私が望むことをするために私が使用できる方法は何ですか？

ご協力いただきありがとうございます、ありがとうございます。

Answer 1

つの選択肢：Vladmirさんのコメントどおり

1. JavaScriptをオンページの検出、。

2. MobileDetectBundleがこの目的のために存在します。あなたは、デスクトップ/モバイルテンプレートを吐き出すか、条件分岐を持つ単一のテンプレートにデバイスタイプを渡すことができ、そこから

   $device = $this->get('mobile_detect.mobile_detector'); 
   
   // basic device detection 
   $device->isMobile(); 
   $device->isTablet(); 
   
   // fine-grained device detection 
   $device->isIphone(); 
   $device->isIpad(); 
   $device->isSamsung(); 
   
   // device operating system 
   $device->isIOS(); 
   $device->isAndroidOS(); 
   

   ：あなたは、あなたのコントローラでこの種のものを行うことができますmobile_detectorサービスを、必要

   {% if not is_mobile() %} 
   {# ----------------------------------- LARGE SCREENS -------------------------- #} 
        <div class="visible-lg-block"> 
         {# Emetteur et infos ticket #} 
         <div class="row"> 
          <div class="col-md-6" style="font-size: 12px"> 
           ... 
   {% else %} 
   {# ----------------------------- SMALL SCREENS ---------------------- #} 
        <div class="hidden-lg"> 
         <div class="col-md-12"> 
          {# Emetteur et infos ticket #} 
           ... 
   {% endif %} 
   

個人的に私は主に、1つの良い応答デザインを構築するCSSを使用した方が多いと思います。