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

响应页面加载弹出窗口

2 个答案: