css - 为什么我的滑块在移动浏览器中变宽了？

Question

我在我的 wordpress 构建的网上商店中有一个滑块。但是我的移动浏览器它变得比它应该的更宽，并且猫弄明白了。如果你调整字体，它会再次获得正确的宽度..

您可以在 www.starstrucked.se 找到该网站

感谢所有提示。

Answer 1

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

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

另一种方法是找到一个响应速度更快的滑块脚本，这几天有不少，比如 bxSlider。

编辑：我看到你有一个脚本head用于缩放 iPhone/iPad 等上的布局，但它不起作用。无论如何，我都会使用 CSS 和元元素。

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；” for key "initial-scale" 被截断为其数字前缀。注意 ';' 不是视口值中的分隔符。该列表应以逗号分隔。www.starstrucked.se:63 视口参数值“4.0;” for key "maximum-scale" 被截断为其数字前缀。注意 ';' 不是视口值中的分隔符。该列表应以逗号分隔。

解决方案

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