応答幅の画面幅と高さで動的にJavascriptを変更

Question

私はスライダーの下にtabsとwordpress回転スライダーを使用しています。

これらのタブは大きな解像度では見た目がよく、モバイルやiPadではよく見えません。だから私はそれをすべてのデバイスに対応させたいと思っています。

今、私はこのスライダータブ幅がJavascriptから動的に生成されることを知ります。

これは応答性が必要なタブです。

どの属性で応答するのかわかりません。

いくつかの提案をお願いします。

ありがとうございます。あなたはCSSのメディアクエリを使用していないのはなぜ

Javascriptのコード

<script type="text/javascript">var htmlDiv = document.getElementById("rs-plugin-settings-inline-css"); var htmlDivCss=""; 
         if(htmlDiv) { 
          htmlDiv.innerHTML = htmlDiv.innerHTML + htmlDivCss; 
         }else{ 
          var htmlDiv = document.createElement("div"); 
          htmlDiv.innerHTML = "<style>" + htmlDivCss + "</style>"; 
          document.getElementsByTagName("head")[0].appendChild(htmlDiv.childNodes[0]); 
         } 
        </script> 
<div class="tp-bannertimer" style="height: 5px; background-color: rgba(68, 150, 57, 0.15);"></div> </div> 
<script type="text/javascript">var htmlDiv = document.getElementById("rs-plugin-settings-inline-css"); var htmlDivCss=""; 
       if(htmlDiv) { 
        htmlDiv.innerHTML = htmlDiv.innerHTML + htmlDivCss; 
       }else{ 
        var htmlDiv = document.createElement("div"); 
        htmlDiv.innerHTML = "<style>" + htmlDivCss + "</style>"; 
        document.getElementsByTagName("head")[0].appendChild(htmlDiv.childNodes[0]); 
       } 
      </script> 

<script type="text/javascript"> 


         /****************************************** 
       - PREPARE PLACEHOLDER FOR SLIDER - 
      ******************************************/ 

      var setREVStartSize=function(){ 
       try{var e=new Object,i=jQuery(window).width(),t=9999,r=0,n=0,l=0,f=0,s=0,h=0; 
        e.c = jQuery('#rev_slider_35_2'); 
        e.gridwidth = [1170]; 
        e.gridheight = [385]; 

        e.sliderLayout = "auto"; 
        if(e.responsiveLevels&&(jQuery.each(e.responsiveLevels,function(e,f){f>i&&(t=r=f,l=e),i>f&&f>r&&(r=f,n=e)}),t>r&&(l=n)),f=e.gridheight[l]||e.gridheight[0]||e.gridheight,s=e.gridwidth[l]||e.gridwidth[0]||e.gridwidth,h=i/s,h=h>1?1:h,f=Math.round(h*f),"fullscreen"==e.sliderLayout){var u=(e.c.width(),jQuery(window).height());if(void 0!=e.fullScreenOffsetContainer){var c=e.fullScreenOffsetContainer.split(",");if (c) jQuery.each(c,function(e,i){u=jQuery(i).length>0?u-jQuery(i).outerHeight(!0):u}),e.fullScreenOffset.split("%").length>1&&void 0!=e.fullScreenOffset&&e.fullScreenOffset.length>0?u-=jQuery(window).height()*parseInt(e.fullScreenOffset,0)/100:void 0!=e.fullScreenOffset&&e.fullScreenOffset.length>0&&(u-=parseInt(e.fullScreenOffset,0))}f=u}else void 0!=e.minHeight&&f<e.minHeight&&(f=e.minHeight);e.c.closest(".rev_slider_wrapper").css({height:f}) 

       }catch(d){console.log("Failure at Presize of Slider:"+d)} 
      }; 

      setREVStartSize(); 

      var tpj=jQuery; 
      tpj.noConflict(); 
      var revapi35; 
      tpj(document).ready(function() { 
       if(tpj("#rev_slider_35_2").revolution == undefined){ 
        revslider_showDoubleJqueryError("#rev_slider_35_2"); 
       }else{ 
        revapi35 = tpj("#rev_slider_35_2").show().revolution({ 
         sliderType:"standard", 
jsFileLocation:"/wp-content/plugins/revslider/public/assets/js/", 
         sliderLayout:"auto", 
         dottedOverlay:"none", 
         delay:5000, 
         navigation: { 
          keyboardNavigation:"off", 
          keyboard_direction: "horizontal", 
          mouseScrollNavigation:"off", 
          mouseScrollReverse:"default", 
          onHoverStop:"on", 
          touch:{ 
           touchenabled:"on", 
           swipe_threshold: 75, 
           swipe_min_touches: 1, 
           swipe_direction: "horizontal", 
           drag_block_vertical: false 
          } 
          , 
          arrows: { 
           style:"hesperiden", 
           enable:true, 
           hide_onmobile:false, 
           hide_onleave:true, 
           hide_delay:200, 
           hide_delay_mobile:1200, 
           tmp:'', 
           left: { 
            h_align:"left", 
            v_align:"center", 
            h_offset:20, 
            v_offset:0 
           }, 
           right: { 
            h_align:"right", 
            v_align:"center", 
            h_offset:20, 
            v_offset:0 
           } 
          } 
          , 
          tabs: { 
           style:"hesperiden", 
           enable:true, 
           width:300, 
           height:75, 
           min_width:100, 
           wrapper_padding:5, 
           wrapper_color:"#e9e9e9", 
           wrapper_opacity:"0.05", 
           tmp:'<div class="tp-tab-content"> <span class="tp-tab-date">{{param1}}</span> <span class="tp-tab-title">{{title}}</span></div><div class="tp-tab-image"></div>', 
           visibleAmount: 4, 
           hide_onmobile: true, 
           hide_under:800, 
           hide_onleave:false, 
           hide_delay:200, 
           direction:"horizontal", 
           span:true, 
           position:"outer-bottom", 
           space:8, 
           h_align:"center", 
           v_align:"bottom", 
           h_offset:10, 
           v_offset:20 
          } 
         }, 
         visibilityLevels:[1240,1024,778,480], 
         gridwidth:1170, 
         gridheight:385, 
         lazyType:"none", 
         shadow:0, 
         spinner:"spinner3", 
         stopLoop:"on", 
         stopAfterLoops:1000, 
         stopAtSlide:1, 
         shuffle:"off", 
         autoHeight:"off", 
         hideThumbsOnMobile:"off", 
         hideSliderAtLimit:0, 
         hideCaptionAtLimit:0, 
         hideAllCaptionAtLilmit:0, 
         debugMode:false, 
         fallbacks: { 
          simplifyAll:"on", 
          nextSlideOnWindowFocus:"off", 
          disableFocusListener:false, 
         } 
        }); 
       } 
      }); /*ready*/ 
     </script> 

Answer 1

？

使用iPad用のコード：

@media (min-device-width : 768px) and (max-device-width : 1024px) { 
    /* Styles for ipad */ 
} 

• Example media queries for ipad and iphone
• Documentation From MDN
• Documentation From Web3Schools
• Using With Bootstrap
• Stackoverflow discussion