响应页面加载弹出

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', 
    }); 
}); 
// ]]>