Disable links for iOS Device using CSS

Question

I have an image gallery, the images are large enough to fill an iPhone screen.

The images are also links, so as you can imagine, scrolling becomes quite frustrating on the iPhone because you're constantly clicking links by accident.

Is there anyway to prevent this using css alone?

If not then what would be the most simple solution to this problem?

Thanks!

Answer 1

I would suggest to use the Javascript. However, I found a way using only CSS. First step, you will need to identify the client browser, just add the code below in your HEAD session in HTML file:

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />

Only if client is using a browser in iphone, the content of "iphone.css" will be loaded.

In this file "iphone.css", you need create a class to disable the links:

.disableLink {
   pointer-events: none;
   cursor: default;
}

In your HTML code of gallery, add the references in your links:

<a href="link.html" class="disableLink"> IMAGE </a>

These steps works only in iPhone/iPod touch, but if you look in my second reference, you will see the way to adapt for iPhone 4/iPod touch 4G: