2013-09-25 1 views
0

Я использую Bootstrap v2.3.2, Bootstrap Responsive v2.3.2 и Supersized 3.2.7 на моем сайте. Настольная версия хороша, но на мобильных устройствах и планшетах у меня есть левое поле/дополнение, см. Снимок экрана ниже. Я попытался удалить строки 804 и 805 bootstrap-responsive.css: @media (max-width: 767px) { body { padding-right: 20px; padding-left: 20px; } без каких-либо успехов.Bootstrap and Supersized js несовместимость на мобильных устройствах

landscape

ли кто-нибудь знает, что является причиной этой проблемы и как ее решить?

Вот 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> 
+0

Вы воспроизвели проблему без перегруженных js? –

+0

Нет, это происходит только с использованием Supersized js. –

+0

Вы считали отключением плагина, когда сайт отображается на мобильном устройстве? –

ответ

2

попробовать это:

  1. не удалять строки 804 и 805 бутстраповского-responsive.css просто сделать обивка налево: 0 ; и padding-right: 0;.

  2. попытайтесь проверить элементы с помощью инспектора google chrome в точках останова для мобильных устройств и планшетов, чтобы вычислить значение пространства (кажется, что погружение вокруг вашего изображения с отступом слева).

обновление:

попробовать это:

  1. в bootstrap.css строке номер 812 у вас есть запас: 0 0 10px 25px;
  2. изменить его на margin: 0 0 10px 0;

попробуйте это и дайте мне отзыв.

+0

Привет, я попытался установить padding-left: 0; и padding-right: 0; без успеха. Я не могу использовать chrome inspector, так как я не могу воспроизвести проблему в браузере рабочего стола, даже если изменить размер экрана вручную. Я вставил свой HTML-код выше. Благодарю. –

+0

используйте этот плагин для хром [разрешение-тест] (https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal), чтобы настроить размер экрана, вы должны попытаться его проверить или дать мне жить код для вашего сайта, чтобы проверить его для вас –

+0

Невозможно воспроизвести черную полосу с помощью плагина. Вот ссылка: http://bit.ly/151iyn3 –

Смежные вопросы