Question

我试图在小屏幕（即iPhone）上阻止我class="blocker"属性的所有链接。目前，图像设置为使用prettyPhoto打开，我希望保留在更大的屏幕上。我已经在这里搜索了javascript的各个部分以帮助我（我是javascript的新手），并提出了$(window).width()和$(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插件，并在比这更小的所有屏幕上使用，只显示没有活动链接的图像。这实际上是可能的吗？

非常感谢

Answer 1

您可能需要单独检查高度和宽度，只需添加“OR”即可：

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

每次点击都没有必要这样做，只需在页面加载上执行此操作，它将具有相同的效果。更好的想法是在调整大小时执行此操作，或检查screen而不是window以获取屏幕大小等。

Answer 2

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

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

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

根据窗口大小停止打开链接

2 个答案: