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

【问题标题】：Why does my slider get wider in mobile browser?为什么我的滑块在移动浏览器中变宽了？
【发布时间】：2013-05-27 10:51:01
【问题描述】：

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

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

感谢所有提示。

【问题讨论】：

您使用的滑块没有响应，尝试使用一些响应式滑块

标签： css wordpress slider

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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">

【讨论】：