0

我试图阻止我class="blocker"在小屏幕（即 iPhone）上打开属性的所有链接。目前，图像设置为使用 prettyPhoto 打开，我希望将其保留在更大的屏幕上。我在这里搜寻了一些 javascript 部分来提供帮助（我是 javascript 新手）并想出了$(window).width()and$(window).height()以及preventDef命令。我试图将其合并到if以下部分的语句中<head>（包括其他 js 脚本）：

<head>
...
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
    <script src="scripts/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        function sizeChecker(){
            if ($(window).width() || $(window).height() < 641) {
                function imgHandler() {
                    document.getElementByClass("blocker").addEventListener("click", preventDef, false);
                    }
            }
    </script>
</head>

在该<body>部分中，列出了图像，然后是 prettyPhoto 代码，如下所示：

<body>
...
    <div class="centered_image">
        <a href="image1.jpg" rel="prettyPhoto[gallery]" class="blocker">
            <img class="img_style" src="image1.jpg" >
        </a>
    </div>
    <div class="centered_image">
        <a href="image2.jpg" rel="prettyPhoto[gallery]" class="blocker">
            <img class="img_style" src="image3.jpg" >
        </a>
    </div>

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            $("a[rel^='prettyPhoto']").prettyPhoto();
        });
    </script>
...
</body>

我的目标是让网站在大于 640x960 的屏幕上使用 prettyphoto 插件，并且在所有小于 640x960 的屏幕上，只显示没有活动链接的图像。这真的可能吗？

非常感谢

4

2 回答 2

1

您可能必须分别检查高度和宽度，仅添加“OR”是行不通的：

$(function() {
    if ($(window).width() < 641 || $(window).height() < 641) {
        $('.blocker').on('click', function() {
            return false;
        });
    }
});

也不需要在每次点击时都这样做，只需在页面加载时这样做，它会产生相同的效果。一个更好的主意是在调整大小时进行，或者检查screen而不是window获取屏幕大小等。

于 2013-02-14T17:31:24.030 回答
0

有几种方法可以做到这一点。

首先有点像你尝试过的，通过测量屏幕尺寸并有条件地加载

        // Arbitrary width
    if ($(window).width() <= 480) {
     //do stuff for small screem
      } else {
     //do stuff for large screen
      }

或者您可以使用媒体查询将元素添加到包含内容的正文中，然后读取内容。这有点复杂，但在断点处的 css 中

@media all and (min-width: 400px) {
    body:after {
        content: 'widescreen';
        display: none;
    }
}

然后在你的 javascript 中寻找那个元素并用它做一些事情。

var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
    if(size.indexOf("widescreen") !=-1 || null) {
//do something
}

第二个例子来自 Jeremy Keith 的博客

http://adactio.com/journal/5429/

于 2013-02-14T19:25:27.657 回答