如何仅在特定屏幕尺寸下使HTML元素可单击

Question

我正在尝试将旧的，定制的网站转换为响应式。 我已经完成了大量的CSS工作，并且可以获得我想要的大部分的定位和定位。 还有最后一件让我悲伤的作品。

我在页面上显示了一系列新闻文章。 当我去手机大小的显示器时，我真的希望这些标题变成“可点击”，以便我可以用它们来显示/隐藏文章的细节。 但我不希望这些标题在更大的屏幕尺寸下可点击。

每篇文章的基本布局是......

<article id="article-001">
    <div class="newsArticleTitle">Title goes here</div>
    <div class="newsArticleTeaser">
        <p>
            Teaser paragraph</p>
    </div>
    <div class="newsArticleContent">
        <p>
            Paragraph 1</p>
        <p>
            Paragraph 2</p>
    </div>
</article>

随着屏幕尺寸减小，控制这些文章显示的相关CSS是......

@media only screen and (max-width: 479px) {
    .newsArticleTeaser {
        display: none;
    }
}


@media only screen and (max-width: 319px) {
    .newsArticleContent {
        display: none;
    }
}

...因此，在最窄的屏幕尺寸下，只有文章标题可见。 然后我需要/希望该文章标题（带有class="newsArticleTitle"的div）然后成为可点击的项目，以便切换预告片和内容的可见性。

是否有理智的方式来实现这一目标？ 我的回退方法可能是复制标题元素 - 一次用<a>标记包装它，一次没有 - 并用CSS切换这两者的可见性。 但这感觉不对。

有没有人更优雅地解决这个问题，或者有更好的方法来设计这个？

Answer 1

您可以将css属性pointer-events: none与媒体查询结合使用：

.elementToClickInMobile {
    pointer-events: none;
    @media all and (max-width: 460px) {
        pointer-events: all
    }
}

这样可以防止大屏幕中的任何点击事件超过460px

编辑//正确建议这可行> IE10

您可以使用的旧版（过时版）浏览器的后备版

$("elementToClick").click(function(e){
    var outerWidth = window.outerWidth
    if (outerWidth > 480) {
        e.preventDefault(); //for browsers
        e.returnValue = false; //for IE
        return false
    }
});

JS未经测试，请随时评论进一步的建议！

EDIT2 //找到了IE7 +指针事件的简洁回退，包括preventClick()方法！ https://github.com/vistaprint/PointyJS

Answer 2

如果支持Internet Explorer的旧版本（<11）不是您的问题，那么您可以使用pointer-events属性和媒体查询单独使用CSS：

@media all and (min-width:600px){
    h1{
        pointer-events:none;
    }
}

• 有关pointer-events更多信息
• 浏览器支持pointer-events
• 有关媒体查询的更多信息

Answer 3

如果你想通过脚本这样做，你可以检查window.innerWidth ;

onclick = function() {
...
if(checkScreenSize()) {
    alert("Your screen is small!");
    ....
}
...
}

function checkScreenSize(){
    return window.innerWidth < 300; //The screen size you would like to enable the click;
}

参考链接 。

希望这可以帮助！

Answer 4

你喜欢的是这样的东西吗？ 这使用JQuery切换相关的.newsArticleContent，以便在单击标题时显示。 您可以像这样在CSS上进行测试，因为.newsArticleContent在适当的屏幕大小下设置为display：none。 您可以查看.toggle（）函数，以便再次单击标题以重新隐藏内容。

    if ($(".newsArticleContent").css("display") == "none") {
        $(".newsArticleTitle").bind("click", function(){
            $(this).siblings(".newsArticleContent").show();
        });
    }

Answer 5

是的以下工作，如果您不必考虑IE10，这是最好的方法。

.elementToClickInMobile {
    pointer-events: none;
    @media all and (max-width: 460px) {
        pointer-events: all
    }
}

您还可以使用window.innerWidth检查视口的大小。 注意不要使用window.outerwidth，因为它获取浏览器窗口外部的宽度。 它表示整个浏览器窗口的宽度，包括侧边栏（如果展开），窗口镶边和窗口调整边框/手柄的大小。