我在 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>
最佳答案
为什么不用CSS的媒体查询？
将此代码用于 ipad:
@media (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles for ipad */
}
关于javascript - 使用屏幕宽度和高度动态更改 Javascript 以提高响应能力，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36441622/