【问题标题】:Remove anchor when in mobile?在移动设备中删除锚点?
【发布时间】:2013-08-19 14:33:49
【问题描述】:

我想在一部手机的时候去掉图片的href..

<header id='top_header'>
    <a href='index.php'><img id='crest' src='../images/868crest.png' alt='868 RCACS Crest'></a>
    <img id='title' src='../images/newtitle.png' alt='868 RCACS Title'>
</header>

我目前没有任何 javascript 或 jquery,所以如果我不能只用 html 和 css 做到这一点,我该怎么做

【问题讨论】:

    标签: javascript jquery html css anchor


    【解决方案1】:

    您可以使用带有handheld 关键字和pointer-event 属性的@media 查询

    @media only screen and (max-device-width: 480px) {
        a {
            pointer-events: none;
        }
    }
    

    Demo(调整屏幕大小并将鼠标悬停在链接上)

    Demo 2(没什么花哨的,只是换了颜色,方便大家测试一下)

    Demo 3(使用 handheld 不会针对计算机)

    注意:我已从该演示中删除了 handheld 以使其从 现在。

    【讨论】:

    • 不幸的是,这不会赶上现在市场上的所有手机,包括拥有(max-device-width: 1136px)stackoverflow.com/questions/12539697/iphone-5-css-media-query的iPhone 5
    • @DGS 这不是覆盖所有设备的代码,我只是给了他一个想法,他可以充分利用它,您需要编写媒体查询以针对特定事物,所以如果是 iphone,我们可以将相同的 a { pointer-events: none; } 放在该媒体查询中
    • 只是想确保他知道这不是万能的
    • @DGS,如果视口元标记设置正确(iPhone5 横向 100% 宽度),max-width: 568px 不会适用于所有 iPhone 版本吗?
    • @FakeRainBrigand 试图指出使用 css 媒体查询定位“手机”是一项艰巨的工作,因为如果宽度太宽,您可能会在桌面浏览器上显示该 css,但会错过一些较大的如果宽度太小,移动屏幕。
    【解决方案2】:

    在窗口加载事件上检测移动设备然后删除 href

    var remHref = function(){
        if(!!window.orientation){
           document.getElementById('crest').href = "#";
        }
    }
    // or use e.preventDefault() on link onclick event
    
    window.onload = remHref 
    

    【讨论】:

      猜你喜欢
      • 2012-03-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多