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

score 12 · Accepted Answer · answered Aug 17 '13 at 06:49

12

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.

answered Aug 17 '13 at 06:49

Mr. Alien

153,751
34
298
278

This will unfortunately not catch all the phones out on the market now including the iPhone 5 which has `(max-device-width: 1136px)` http://stackoverflow.com/questions/12539697/iphone-5-css-media-query – DGS Aug 17 '13 at 07:03
2

@DGS this not the piece of code which will cover all devices, I just gave him an idea, he can make the most out of it, you need to write media queries to target specific things, so if it's iphone, we can just put the same `a { pointer-events: none; }` inside that media query – Mr. Alien Aug 17 '13 at 07:05
Just wanted to make sure he knew it was not a catch all – DGS Aug 17 '13 at 07:09
@DGS, wouldn't `max-width: 568px` work for all iPhone versions if the viewport metatag was set correctly (100% width on iPhone5 landscape)? – Brigand Aug 17 '13 at 07:11
@FakeRainBrigand was trying to point out that targeting "mobile phones" with css media queries is a hard job since you may display that css on desktop browsers if the width is too wide but miss some of the bigger mobile screens if the width is too small. – DGS Aug 17 '13 at 07:55

score 2 · Answer 2 · answered Aug 17 '13 at 09:50

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

answered Aug 17 '13 at 09:50

Exception

8,111
22
85
136

Remove anchor when in mobile?

2 Answers2