仅针对较窄的屏幕修改内部 href link

Question

我有一个包含大量产品图片的 'overview' html 页面 - 每张图片 link 到一个可能有 3 或 4 个产品的页面，例如 src="gadgets-1.html"

在桌面设备上，用户可以在目标页面上看到大多数产品，或者可以根据需要轻松向下滚动。

但是在 css MQ 将所有列都转换为 100% 宽度的窄屏幕上，最后的项目不一定在视图中，用户必须凭直觉向下滑动页面，所以我想要将 linking 图像直接 link 到目标页面上的相关项目。

我已经建立了运行良好的锚 links，例如 src="gadgets-1.html#red-thing"，但我不希望“#red-thing”在更宽的屏幕上处于活动状态。

要恢复，我希望 link 成为小工具 - 1.html 在更宽的屏幕上并且 gadgets-1.html#red-thing on narrow screen.

我不明白 css 可以（或应该）如何做到这一点。应该用js还是php？如果可以，怎么做？

Answer 1

我能想到几个解决方案。我通常不喜欢使用 javascript 来根据屏幕宽度修改 DOM，但如果您愿意，这是一个可以接受的解决方案。

或者您可以像这样简单地做一些事情：

<div class="links">
    <a class="mobileLink" href="gadgets-1.html#red-thing">gadgets-1</a>
    <a class="desktopLink" href="gadgets-1.html">gadgets-1</a>
</div>

根据屏幕宽度

用一些css隐藏右边link

.mobileLink{
    display: none;
}
@media screen and (max-width: 992px) {
    .mobileLink{
        display: inline-block;
    }
    .desktopLink{
        display: none;
    }        
}

Answer 2

因为你不想重复锚元素（根据其他线程），你将无法使用 css 做到这一点，所以你必须使用 js。

if(window.innerwidth < 911){
document.getElementsByClassName("class")[0].setAttribute("href", "url_for_small_screen_devices);
}else{
document.getElementsByClassName("class")[0].setAttribute("href", "url_for_normal_desktop_and_bigger_devices");
}

您可以使用循环为所有锚点重复相同的过程，并使用适当的选择器。

Answer 3

一个灵活的解决方案是使用 Javascript 和特定的数据属性来存储不同的锚点名称。

HTML:

<a class="targetLink" href="/link1" data-anchor="anchor-name1">Target link</a>
<a class="targetLink" href="/link2" data-anchor="anchor-name2">Target link</a>

要在 DOM 就绪并 window 调整大小时跨浏览器执行代码，jQuery 会很有用。
检查 CodePen here

$(document).ready(function() {
    var $target = $(".targetLink");
    var $window = $(window);
    var breakpoint = 640;
    var linkSmall = false;

    function checkWidth() {
        if ($window.width() <= breakpoint) {
            // appends anchors to links
            if(!linkSmall){
                $target.each(function(index) {
                   var href2 = $(this).attr("href") + "#" + $(this).attr("data-anchor");
                   $(this).attr("href", href2 );
                });
                linkSmall = true;
            }
        }else{
            // removes anchors to links
            if(linkSmall){
                $target.each(function(index) {
                   var href1 = $(this).attr("href");
                   var a = href1.indexOf('#');
                   var href2 = href1.substring(0, a != -1 ? a : href1.length);
                   $(this).attr("href", href2 );
                });
                linkSmall = false;
            }
        }
    }
    checkWidth(); // on document ready
    $(window).resize(checkWidth); // on window resize
});

仅针对较窄的屏幕修改内部 href link

Modify an internal href link for only narrower screens

html

css

anchor

responsive