bootstrap調整頁面未找到視口

Question

所以當用戶點擊一個按鈕時，我想打開一個彈出窗口，具體取決於頁面的寬度，我希望相應地調整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

我認爲他們的意思是「視口」作爲字符串，你應該傳遞給函數。

$(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（ 'MD'））
等..

希望它可以幫助你。 最好， 伊多。

Answer 2

您需要在javascript中聲明viewport變量。

// 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); 

視口isset到ResponsiveBootstrapToolkit所以你必須在項目中包含的responsive-bootstrap-toolkit：

在這個例子中它使用IIFE做如下。