使用屏幕宽度动态更改Javascript&；反应高度

我正在使用wordpress revolution滑块，滑块下有

选项卡

因为这些标签在大分辨率上看起来不错，但在手机和iPad上看起来不太好。所以我想让它对所有设备都有响应

现在我发现这个滑块是从Javascript动态生成的

这是需要响应的选项卡。

我不确定哪个属性会使它响应

请提出一些建议

谢谢

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>

var htmlDiv=document.getElementById（“rs插件设置内联css”）；var htmlDivCss=“”；
如果（htmlDiv）{
htmlDiv.innerHTML=htmlDiv.innerHTML+htmlDivCss；
}否则{
var htmlDiv=document.createElement（“div”）；
htmlDiv.innerHTML=“”+htmlDivCss+”；
document.getElementsByTagName（“head”）[0].appendChild（htmlDiv.childNodes[0]）；
}
var htmlDiv=document.getElementById（“rs插件设置内联css”）；var htmlDivCss=“”；
如果（htmlDiv）{
htmlDiv.innerHTML=htmlDiv.innerHTML+htmlDivCss；
}否则{
var htmlDiv=document.createElement（“div”）；
htmlDiv.innerHTML=“”+htmlDivCss+”；
document.getElementsByTagName（“head”）[0].appendChild（htmlDiv.childNodes[0]）；
}
/******************************************
-为滑块准备占位符-
******************************************/
var setREVStartSize=函数（）{
试试{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#u slider_35_2'）；
e、 网格宽度=[1170]；
e、 网格高度=[385]；
e、 sliderLayout=“自动”；
若（e.ResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResResRes水平和（t=r=f，l=e，l=e e，l=e），i>f和f和f>r和f>r和r和（r=f，n=f，n=e（r=f，n=e，n=e）和（r=e），若若若（r=f（r=f，n=f，n=n=e）有），t（r和（r=e，n=e），t（e）和（若），t，若，若（e）有），t（e（e（e）和（e，若），t（e），t>c.width（），jQuery（window.height（））；如果（void 0！=e.fullScreenOffsetContainer）{var c=e.fullScreenOffsetContainer.split（“，”）；if（c）jQuery.each（c，函数（e，i）{u=jQuery（i）.长度>0？u-jQuery（i）.outerHeight（！0）：u}），e.fullScreenOffset.split（“%”。长度>1&&void 0！=e.fullScreenOffset&&e.fullScreenOffset.长度>0？u-=jQuery（window）.高度（）/100:void 0！=e.fullScreenOffset&&e.fullScreenOffset.length>0&&u-=parseInt（e.fullScreenOffset，0））}f=u}否则void 0！=e.minHeight&&f为什么不使用CSS的媒体查询

在ipad上使用以下代码：

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







虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，则只有链接的答案可能会无效。-感谢您的反馈。按照您的建议进行编辑。感谢您的编辑！我不了解javascript，但这段代码是如何使用的处理新的iPad Pro分辨率？用iPad Pro的宽度和高度更改我上面显示的像素。有一些很好的解释。你可以用谷歌搜索它，比如：“iPad Pro媒体查询css”我应该在Wordpress中的哪里添加此代码？我仍然不确定上面的代码，因为每个选项卡的宽度是300px，所以对于四个选项卡，它将变成1200px，并且没有响应。