为什么我的滑块在移动浏览器中变得更宽？

Question

我的wordpress内置网店有一个滑块。 但是我的移动浏览器它应该比它应该更广泛，猫可以解决它。 如果你改变它，它会再次获得正确的宽度..

您可以在www.starstrucked.se

找到该网站

感谢你的提示。

Answer 1

您的滑块具有固定的宽度，这使得它对于移动浏览器（例如iPhone）而言太宽。您可以通过将页面添加到页面的head来强制页面适合浏览器窗口：

<meta name="viewport" content="width=device-width">

另一种方法是找到一个响应更快的滑块脚本，这些脚本现在有很多，例如bxSlider。

编辑：我发现你在head中有一个脚本，用于扩展iPhone / iPad等的布局，但它无效。无论如何，我会选择CSS和meta元素。

Answer 2

宽度灵活。对于桌面，它是83％（883px） 当您调整浏览器大小时，滑块具有内联样式：

<div class="slider jquery-slider default" style="width: 883px; height: 361px;">
<div class="slide-wrapper" style="width: 883px; height: 361px;">

因此，javascript可能会设置内联样式，或者它在html中是硬编码的。 可以将jquerySlider放到响应中吗？

http://wordpress.org/support/plugin/jquery-slider

<强>附加： 检查控制台：

视口参数值“1.0;”密钥“initial-scale”被截断为其数字前缀。注意 ';'不是视口值中的分隔符。该列表应以逗号分隔。 www.starstrucked.se:63     视口参数值“4.0;”密钥“maximum-scale”被截断为其数字前缀。注意 ';'不是视口值中的分隔符。该列表应以逗号分隔。

解决方案

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">