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

Question

我正在尝试将旧的 custom-built 网站转换为响应式网站。我已经完成了大部分 CSS 工作，并且可以获得我想要的大部分尺寸和位置。最后一首曲子让我很伤心。

我在页面上显示了一系列新闻文章。当我转到移动 phone-size 显示时，我真的希望这些标题变成 "clickable" 以便我可以将它们用于 show/hide 文章的详细信息。但我不希望这些标题在更大的屏幕尺寸下可以点击。

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

<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;
    }
}

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

有没有一种明智的方法可以做到这一点？我的后备方法可能是复制标题元素 - 一次用 <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

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

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

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;
}

参考link.

希望对您有所帮助！

Answer 4

您正在寻找这样的东西吗？这使用 JQuery 将相关的 .newsArticleContent 切换为在单击标题时显示。您可以像这样在 CSS 上进行测试，因为 .newsArticleContent 在适当的屏幕尺寸下设置为 display:none。您可以查看 .toggle() 函数以再次单击标题以 re-hide 内容。

    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，因为它获取的是浏览器外部的宽度window。它表示整个浏览器的宽度 window，包括边栏（如果展开）、window chrome 和 window 调整大小 borders/handles。

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

How can I make an HTML element clickable only at certain screen sizes

html

javascript

css

responsive-design