bootstrap изменение размера страницы, не находя видовое окно

Question

Итак, когда пользователь нажимает кнопку, я хочу открыть popUp, в зависимости от ширины страницы, я хочу соответственно изменить размер popUp.

Нашли вкусный крошечное пример How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?

// Executes only in XS breakpoint 
if(viewport.is('xs')) { 
    // ... 
} 

// Executes in SM, MD and LG breakpoints 
if(viewport.is('>=sm')) { 
    // ... 
} 

// Executes in XS and SM breakpoints 
if(viewport.is('<md')) { 
    // ... 
} 

Проблема ракурс стрельбы не определен

Uncaught ReferenceError: viewport is not defined 
at <anonymous>:1:1 

, но я включил его в моей голове

<!--Viewport--> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

Я также переместил сценарии начальной загрузки с головы на тело.

Есть ли у кого-нибудь идеи, что не так? ta

Answer 1

Я думаю, что они означают «viewport» как строку, которую вы должны передать функции.

$(window).on('resize', cahngeViewport($(window).width())); 
 

 
function cahngeViewport(viewport) 
 
{ 
 
    if(viewport >= 1200) 
 
    { 
 
     console.log('lg'); 
 
    } 
 
    else if(viewport < 1200 && viewport > 768) 
 
    { 
 
    console.log('md'); 
 
    } 
 
    else if(viewport < 768 && viewport > 480) 
 
    { 
 
    console.log('sm'); 
 
    } 
 
    
 
    else if(viewport < 480) 
 
    { 
 
    console.log('xs'); 
 
    } 
 
} 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

так, то вы можете вернуть размер как строка и проверить, если (viewport.is ('мкр'))
и т.д ...

Надеются, что это помогает , Лучший, Идо.

Answer 2

Вам необходимо объявить переменную viewport в javascript.

В примере это делается с помощью IIFE следующим образом:

// Wrap IIFE around your code 
(function($, viewport){ 
    $(document).ready(function() { 

     // Executes only in XS breakpoint 
     if(viewport.is('xs')) { 
      // ... 
     } 

     // Executes in SM, MD and LG breakpoints 
     if(viewport.is('>=sm')) { 
      // ... 
     } 

     // Executes in XS and SM breakpoints 
     if(viewport.is('<md')) { 
      // ... 
     } 

     // Execute code each time window size changes 
     $(window).resize(
      viewport.changed(function() { 
       if(viewport.is('xs')) { 
        // ... 
       } 
      }) 
     ); 
    }); 
})(jQuery, ResponsiveBootstrapToolkit); 

Окно просмотра Исеть в ResponsiveBootstrapToolkit, так что вы должны включить responsive-bootstrap-toolkit в вашем проекте.