当达到特定屏幕尺寸时隐藏"onclick"行(显示：无)/响应

Question

在我的代码中，当您单击它时将打开一个模态窗口。在响应式视图中，这个视图不是用户友好的所以我想隐藏整个onclick"线。我已经尝试了css标签(display-none)与媒体查询相结合，但这不起作用。

<a
class="<?php echo ($display == 'thumbs' ? 'ImageWrapperLarge' : 'ImageWrapper') ?>"
onClick="return <?php echo ($pageid_view_modal?"Modal":"CentralSpace") ?>Load(this,true);"
href="<?php echo $baseurl_short . ("page.php?id=" . $id) ?>"
title="<?php echo str_replace(array(""","'"),"",specialchars(i18n_get_translated(strip_tags(strip_tags_and_attributes($result[$n]["field".$title_field])))))?>"
>

Answer 1

你不能隐藏onClick行，你应该创建另一个链接。

.mobile-link {
display: none;
}

/* Yes, Samsung S21 is 515px wide */
@media screen and (max-width: 515px) {
.mobile-link {
display: inline-block;
}
.desktop-link {
display: none;
}
}

<a class="desktop-link" onClick="alert('Do something');" href=" # " title="Desktop Link ">Desktop Link</a>
<a class="mobile-link" href=" # " title="Desktop Link ">Mobile Link</a>

Answer 2

另一个解决方案是检查window的宽度并相应地禁用onClick。

我还没有测试过，但是你可以把你的onClick改成

<!-- using 400px generically !-->
<a onClick="window.innerWidth > 400 ? return <?php echo ($pageid_view_modal?"Modal":"CentralSpace") ?>Load(this,true); : null">
</a>