在移动设备中删除锚点？答案

【问题标题】：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

【讨论】：