Fatal编程技术网

Twitter bootstrap 移动设备上的引导和超大js不兼容

twitter-bootstrap mobile

Twitter bootstrap 移动设备上的引导和超大js不兼容,twitter-bootstrap,mobile,supersized,Twitter Bootstrap,Mobile,Supersized,我在我的网站上使用了Bootstrap v2.3.2、Bootstrap Responsive v2.3.2和Supersized 3.2.7。桌面版不错，但在移动设备和平板电脑上，我有一个空白/空白，请参见下面的屏幕截图。我试图删除bootstrap-responsive.css的第804行和第805行： @介质（最大宽度：767px）{ 身体{ 右边填充：20px； 左侧填充：20px； } 没有成功 有人知道是什么导致了这个问题以及如何解决它吗 以下是我使用的HTML代码： <

我在我的网站上使用了Bootstrap v2.3.2、Bootstrap Responsive v2.3.2和Supersized 3.2.7。桌面版不错，但在移动设备和平板电脑上，我有一个空白/空白，请参见下面的屏幕截图。我试图删除bootstrap-responsive.css的第804行和第805行： 

@介质（最大宽度：767px）{
身体{
右边填充：20px；
左侧填充：20px；
}
没有成功

有人知道是什么导致了这个问题以及如何解决它吗

以下是我使用的HTML代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
    </head>

    <body>

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span4"></div>
            <div class="span4"></div>
            <div class="span4"></div>
        </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script> 
    <script src="js/supersized.3.2.7.js"></script>

    <script type="text/javascript">

        jQuery(function($){

            $.supersized({

                // Functionality
                slideshow               :   1,          // Slideshow on/off
                autoplay                :   1,          // Slideshow starts playing automatically
                start_slide             :   1,          // Start slide (0 is random)
                stop_loop               :   0,          // Pauses slideshow on last slide
                random                  :   0,          // Randomize slide order (Ignores start slide)
                slide_interval          :   11000,      // Length between transitions
                transition              :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   1000,       // Speed of transition
                new_window              :   1,          // Image links open in new window/tab
                pause_hover             :   0,          // Pause slideshow on hover
                keyboard_nav            :   1,          // Keyboard navigation on/off
                performance             :   3,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect           :   1,          // Disables image dragging and right click with Javascript

                // Size & Position                         
                min_width               :   0,          // Min width allowed (in pixels)
                min_height              :   0,          // Min height allowed (in pixels)
                vertical_center         :   0,          // Vertically center background
                horizontal_center       :   1,          // Horizontally center background
                fit_always              :   0,          // Image will never exceed browser width or height (Ignores min. dimensions)
                fit_portrait            :   1,          // Portrait images will not exceed browser height
                fit_landscape           :   0,          // Landscape images will not exceed browser width

                // Components                           
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                thumb_links             :   1,          // Individual thumb links for each slide
                thumbnail_navigation    :   0,          // Thumbnail navigation
                slides                  :   [           // Slideshow Images

                                                    {image : 'img/yun_13242.jpg'},
                                                    {image : 'img/yun_13242.jpg'}
                                            ],

                // Theme Options               
                progress_bar            :   1,          // Timer for each slide                         
                mouse_scrub             :   0

            });
        });

    </script>
    </body>
</html>


jQuery（函数（$）{
美元。超大({
//功能性
幻灯片放映：1，//幻灯片放映打开/关闭
自动播放：1，//幻灯片自动开始播放
开始幻灯片：1，//开始幻灯片（0是随机的）
停止循环：0，//暂停最后一张幻灯片的幻灯片放映
随机：0，//随机幻灯片顺序（忽略开始幻灯片）
滑动间隔：11000，//过渡之间的长度
转换：1、//0-无、1-淡入、2-顶部滑动、3-右侧滑动、4-底部滑动、5-左侧滑动、6-右侧旋转木马、7-左侧旋转木马
过渡速度：1000，//过渡速度
新建窗口：1，//在新窗口/选项卡中打开图像链接
暂停\悬停：0，//悬停时暂停幻灯片放映
键盘导航：1，//键盘导航打开/关闭
性能：3、//0-正常，1-混合速度/质量，2-优化图像质量，3-优化转换速度//（仅适用于Firefox/IE，不适用于Webkit）
image\u protect:1，//禁用图像拖动并使用Javascript右键单击
//大小和位置
最小宽度：0，//允许的最小宽度（以像素为单位）
最小高度：0，//允许的最小高度（以像素为单位）
垂直中心：0，//垂直中心背景
水平居中：1，//水平居中背景
fit_always:0，//图像永远不会超过浏览器宽度或高度（忽略最小尺寸）
fit_纵向：1，//纵向图像将不会超过浏览器高度
fit_横向：0，//横向图像将不会超过浏览器宽度
//组成部分
幻灯片链接：'空白'，//每张幻灯片的单个链接（选项：false、'num、'name、'blank'）
thumb_链接：1，//每张幻灯片的单个thumb链接
缩略图\u导航：0，//缩略图导航
幻灯片：[//幻灯片放映图像
{图片：'img/yun_13242.jpg'}，
{图片：'img/yun_13242.jpg'}
],
//主题选项
进度条：1，//每个幻灯片的计时器
鼠标拖动：0
});
});
试试这个：

  • 不要删除bootstrap-responsive.css的第804行和第805行，只需将左填充：0； 和右填充：0；

  • 尝试在移动设备和平板电脑的断点处使用google chrome inspector检查元素，以计算空间值（看起来你的图像周围还有空白）

    • 更新：

    试试这个：

  • 在bootstrap.css行号812中，您有边距：0 10px 25px
  • 将其更改为边距：0 10px 0
    • 试试这个，给我反馈。

    你有没有在没有超大js的情况下重现问题？没有，只有在使用超大js时才会出现。你有没有考虑过在移动设备上显示网站时禁用插件？有，但我也想在移动设备和平板电脑上使用插件。好的。你有没有尝试过摆弄左边的填充？嗨，我尝试将左填充：0；右填充：0；但没有成功。我无法使用chrome inspector，因为我无法在桌面浏览器上重现问题，即使我手动调整屏幕大小。我在上面粘贴了我的HTML代码。谢谢。使用chrome插件设置屏幕大小，您必须尝试检查它或为我提供一个实时代码你也不能用插件复制黑条。这里的链接是：试试这个：1.在bootstrap.css行号812中，你有边距：0 0 10px 25px；2.改为边距：0 0 0 10px 0；试试这个，给我反馈，欢迎你，如果你需要任何关于引导的帮助，尽管问。