javascript - 使用屏幕宽度和高度动态更改 Javascript 以提高响应能力

Question

我在 slider 下使用带有 tabs 的 wordpress revolution slider 。

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

现在我发现这个 slider 选项卡宽度是从 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>

Answer 1

为什么不用CSS的媒体查询？

将此代码用于 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