Remove anchor when in mobile?

Question

I want to remove the href of an image when one mobile phones..

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

I currently don't have any javascript's or jquery so how can i do this if i cant do this with just html and css

Answer 1

You can use @media queries with handheld keyword and pointer-event property like

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

Demo (Resize the screen and hover over the link)

Demo 2 (Nothing fancy, just changed the color, so that you can test it better)

Demo 3 (Using handheld won't target computers)

Note: I've removed handheld from that demo to make it work as of now.

Answer 2

Detect mobile on window onload event then remove href

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

window.onload = remHref