響應頁面加載彈出

Question

目前我有這個，它適用於手機的完美，但尺寸太小，桌面。

<!-- Main Stylesheet --> 
<p><link href="/adpopup-pro.min.css" rel="stylesheet" media="screen" type="text/css" /></p> 

<!-- jQuery (load only if needed) --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

<!-- Main Javascript --> 
<script type="text/javascript" src="/adpopup-pro.min.js"></script> 
<script type="text/javascript">// <![CDATA[ 

$(document).ready(function() { 

    var ads = { 
     'ad_1': { 
     'type': 'image', 
     'src': 'imagelink', 
     'link': 'link', 
     } 

    } 

    $('body').adPopupPro({ 
     ads: ads, 
     width:320, 
     height:320, 
     overlay_color:'dark', 
    }); 
    }); 
// ]]></script> 

反正是有以某種方式包圍這一點，並把它加載只在移動和裝載另一個在臺式機和更大的尺寸？

Answer 1

你可以像下面這樣做

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 

} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 

} 

編輯：這是一個類似的答案 How to auto adjust the div size for all mobile/tablet display formats?

Answer 2

鏈接試試這個由您的用戶代理分辨率檢查和獲取不同的值，您的廣告寬度和高度。

$(document).ready(function() { 

    var ads = { 
     'ad_1': { 
     'type': 'image', 
     'src': 'imagelink', 
     'link': 'link', 
     } 

    } 

    $('body').adPopupPro({ 
     ads: ads, 
     width:(function(){ 
     if(window.innerWidth>768){ //could be any breakpoint value! 
      var width = 320; 
     } 
     else{ 
      var width = 200; 
     } 
     return width; 
     })(), 
     height: (function(){ 
     if(window.innerWidth<768){ //could be any breakpoint value! 
      var height = 320; 
     } 
     else{ 
      var height = 200; 
     } 
     return width; 
     })(), 
     overlay_color:'dark', 
    }); 
}); 
// ]]>