关键词：
【中文标题】Flexslider 视口高度在调整大小时无响应【英文标题】：Flexslider viewport height unresponsive on resize 【发布时间】：2012-11-14 00:05:18 【问题描述】：我正在尝试在每张幻灯片上使用带有基于文本的内容的 Flexslider，这意味着幻灯片和视口的垂直高度需要根据窗口的宽度动态改变。
加载时，Flexslider 初始化，随后的一些 jQuery 使所有幻灯片与视口具有相同的高度，并使每张幻灯片中的内容垂直居中。如果您不调整浏览器的大小，这很好。但是，如果这样做，则会出现几个问题：
如果更改窗口大小，则视口的高度已经在加载时设置，并且不会改变，因此缩小窗口会使文本溢出并消失，展开它会使幻灯片看起来很空白。李> 奇怪的是，如果您在页面加载时调整窗口大小，那么视口会假定一个相当大的高度。还有另一个可能与此相关的问题： * 在加载时，我短暂地看到 Flexslider 初始化时出现五彩斑斓的混乱。
我的代码如下所示：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="/link/to/flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
var verticalCenterer = function ()
$(this).css('margin-top', ($(this).parent().height()-($(this).outerHeight()))/2);
;
var carouselInit = function()
var carouselHeight = $('.flex-viewport').innerHeight();
$('.slides li').css('height',carouselHeight);
$('p').each(function()
$(this).css('margin-top', ($(this).parent().height()-($(this).outerHeight()))/2);
);
$(window).load(function()
$('.carousel').flexslider(
animation: "slide",
slideshowSpeed: 2000,
animationSpeed: 500,
directionNav: false,
pausePlay: true,
pauseText: '',
playText: '',
start: carouselInit
);
alert('Wait a moment');
);
$(window).resize(carouselInit);
</script>
<div class="carousel">
<ul class="slides">
<li style="background: #ff9999;">
<p>Lorem ipsum dolor sit amet 1; Lorem ipsum dolor sit amet 2; Lorem ipsum dolor sit amet 3; Lorem ipsum dolor sit amet 4; Lorem ipsum dolor sit amet 5; Lorem ipsum dolor sit amet 6; Lorem ipsum dolor sit amet 7; Lorem ipsum dolor sit amet 8; Lorem ipsum dolor sit amet 9; <strong>Lorem ipsum dolor sit amet 10</strong>; Lorem ipsum dolor sit amet 11; Lorem ipsum dolor sit amet 12; Lorem ipsum dolor sit amet 13; Lorem ipsum dolor sit amet 14; <strong>Lorem ipsum dolor sit amet 15</strong>.</p>
</li>
<li style="background: #9999ff;">
<p>A shorter one</p>
</li>
<li style="background: #99ff99;">
<p>Test text test text Test text test text Test text test text Test text test text Test text test text Test text test text Test text test text Test text test text</p>
</li>
</ul>
</div>
我还发了an example jsfiddle:
幻灯片标记和页面特定的 JavaScript 都在 HTML 中。 JavaScript 包含最新的缩小 Flexslider 代码。 我设置了一个在负载时运行的警报，以冻结多张幻灯片的混乱。谢谢！
【问题讨论】：
【参考方案1】：只需评论以下内容：
....
//$(window).resize(carouselInit);
</script>
<div class="carousel">
....
在关闭脚本标记之前在代码中注释 $(window).resize(carouselInt)。 检查以下工作示例： http://jsfiddle.net/saidbakr/6FMrL/9/
【讨论】：
【参考方案2】：我遇到了同样的问题，并通过使用以下代码更改每个浏览器调整大小时的视口大小和幻灯片宽度来修复它：
$(window).on('resize', function ()
if ($('.flexslider').length > 0)
$('.flexslider').each(function ()
$(this).find('.flex-viewport').css('height', 'auto');
$(this).find('>.slides').each(function ()
let height = $(this).css('height');
$(this).find('> li').css('width', height);
);
);
);
【讨论】：
响应式网页设计和调整图像大小
...于除图像之外的大多数html元素。我发现它一团糟。调整视口大小时，不能在图像上使用调整大小百分比，因为它将占用父元素的宽度和高度。您需要为图像设置固定的宽度和高度...还是我遗漏了什么？那么，对于容器元素/父级... 查看详情
响应式文本——未使用 FitText 和 FlexSlider 初始化的函数
】响应式文本——未使用FitText和FlexSlider初始化的函数【英文标题】：Responsivetext--FunctionnotInitializingwithFitTextandFlexSlider【发布时间】：2012-11-2315:40:51【问题描述】：我有一个使用FlexSlider的响应式滑块。我还希望每个滑块下的文本... 查看详情
获取浏览器视口的宽度和高度，无论内容大小如何且不调整为 100%？
】获取浏览器视口的宽度和高度，无论内容大小如何且不调整为100%？【英文标题】：Getthebrowserviewportwidthandheightnomatterthesizeofthecontentsandwithoutsizingto100%?【发布时间】：2020-03-3117:52:57【问题描述】：有没有办法在不将正文宽度和高... 查看详情
在 Trigger.io 中打开 iOS7 软键盘时重新调整视口高度
】在Trigger.io中打开iOS7软键盘时重新调整视口高度【英文标题】：Re-sizingviewportheightwhentheiOS7softkeyboardisopenedinTrigger.io【发布时间】：2014-08-0100:31:27【问题描述】：当在android中打开软键盘时，视口会自动调整大小以适应屏幕（设备... 查看详情
Twitter Bootstrap：轮播：在定义高度视口中垂直居中图像
】TwitterBootstrap：轮播：在定义高度视口中垂直居中图像【英文标题】：TwitterBootstrap:Carousel:VerticallyCenterImageinDefindedheightViewport【发布时间】：2013-01-1706:33:28【问题描述】：我正在尝试找到一种将图像垂直居中于我的视口内的旋转... 查看详情
使用视口动态调整 3x3 方格的大小
】使用视口动态调整3x3方格的大小【英文标题】：Dynamicallyresizea3x3gridofsquareswiththeviewport【发布时间】：2019-01-2320:02:52【问题描述】：感谢您花时间了解我的困境。我要做的是用HTML/CSS中其他方形div的3x3网格填充一个完美的方形div... 查看详情
带有 flexbox 的 css 正方形网格
...试创建一个响应式正方形网格。正方形应调整大小以适应视口的宽度。更改视口高度时，方块不应调整大小。我知道如何调整每个正方形的宽度，但我不知道如何使元素变成正方形以及如何在视口宽度发生变化时缩放它们的高度... 查看详情
在使用 css 调整窗口大小时调整 div 的宽度和高度
...整高度的相关性。【问题讨论】：【参考方案1】：使用视口百分比长度：5.1.2.Viewpor 查看详情
在 Safari 的响应式设计模式中，如何将视口宽度设为特定的 px 大小？
】在Safari的响应式设计模式中，如何将视口宽度设为特定的px大小？【英文标题】：InSafari\'sResponsiveDesignMode,howImakeviewportwidthaspecificpx-size?【发布时间】：2021-04-2116:33:23【问题描述】：通过单击并拖动侧边栏，我可以调整视口宽度... 查看详情
响应式调整图像和背景图像的大小
...JPG和一个SVG，必须重叠，JPG位于SVG之上。它们都必须随着视口尺寸的变化而完全按比例调整大小，不仅在特定断点处，而且在不断变化。JPG是图形(<figure>&am 查看详情
在浏览器调整大小（视口宽度）时动态添加类
】在浏览器调整大小（视口宽度）时动态添加类【英文标题】：Dynamicallyaddclassonbrowserresize(viewportwidth)【发布时间】：2015-02-2500:16:41【问题描述】：我有一个名为jobfilter的元素，我想根据视口宽度添加一个类，即。当我将浏览器... 查看详情
字体大小基于视口宽度和高度
】字体大小基于视口宽度和高度【英文标题】：font-sizebasedonBOTHviewportwidth&height【发布时间】：2017-06-1016:57:06【问题描述】：我会保持简短直接，所以我明白：VW根据视口宽度更改字体大小。VH根据视口高度更改字体大小。我的... 查看详情
javascript在处理响应式内容时显示视口大小的脚本(代码片段)
如何在不缩放其内容的情况下调整 opengl 视口大小
】如何在不缩放其内容的情况下调整opengl视口大小【英文标题】：Howdoyouadjustanopenglviewportsizewithoutscalingitscontents【发布时间】：2012-09-0713:00:15【问题描述】：调整窗口大小时，我不希望内容缩放，而只是增加视口大小。我在***（h... 查看详情
根据内容大小动画和调整 div 动态高度
...器窗口的大小，那么div将增加/减少高度。我已经有了80%视口的动态宽度。这是我目前用来动画调整容器大小的方 查看详情
带有纯 CSS3 媒体查询的 IE9 响应式图像调整大小问题
...问题是：在1024*768屏幕分辨率下，没有滚动条宽度的检查视口为1007。我在CSS3中将1007px视口的媒体查询设置为@mediascreenand(max-width: 查看详情
为啥滑块图像唯一没有响应？
...间】：2013-02-0821:18:02【问题描述】：我正在使用woothemes的flexslider，但无法弄清楚为什么在调整浏览器大小/在ipad/iphone上查看网站时，图像总是比内容宽得多。我在滑块、幻灯片或图像上看不到任何可能导致图像无法调整大小 查看详情
具有相同高度不同宽度的响应图像并排
】具有相同高度不同宽度的响应图像并排【英文标题】：Responsiveimagessidebysidewithsameheightdifferentwidth【发布时间】：2016-05-1320:57:00【问题描述】：我的问题在图片中：桌面分辨率示例：在服务器中，我想使用默认尺寸的图片(800x450p... 查看详情