javascript - 响应页面加载弹出窗口

标签 javascript jquery css magento

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 6 年前

目前我有这个,它非常适合移动设备,但对于台式机来说尺寸太小了。

<!-- 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>

有没有办法以某种方式封装它,让它只在移动设备上加载,而在桌面和更大尺寸的设备上加载另一个?

最佳答案

你可以这样做

/* 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?

关于javascript - 响应页面加载弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40599114/

上一篇:javascript - 将文本区域输入字符串转换为类型对象

下一篇:css - @media screen 和 (max-width :770px) and @media screen and (max-width:770px + 30px) 之间有什么区别

相关文章:

javascript - 以 HTML 格式在 jQuery Slider 上居中图像

JavaScript:4 个异步函数在继续之前按顺序等待彼此完成?

javascript - 添加和删​​除类不同的元素

javascript - JQuery Slidetoggle() 工作但不是我所需要的

html - 如何在数据表中的搜索框行下方设置一个 div?

php - 调整图像大小时它不保持比例?

javascript - 获取多个元素的内部 HTML

javascript - 在 Javascript 中填充的可折叠项将不起作用

javascript - jquery 在第一个和最后一个 li 上圆 Angular

javascript - response.writeHead 上出现意外标记