CODEWITHSUNDEEP
iphonecssiostouch
user1505254
user1505254

Reputation:

Disable links for iOS Device using CSS

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!

Upvotes: 3

Views: 2462

Answers (3)

well
well

Reputation: 1140

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:

Upvotes: 1

Jezen Thomas
Jezen Thomas

Reputation: 13800

I like the idea of pointer-events: none;, but I wouldn't use it because it isn't well-supported.

If we're defining a mobile device as just having a certain screen size, I would do something like this:

$(function () {
    var mobile = ($(window).width() < 481);
    $('#image-gallery').find('a').click(function (e) {
        if (mobile)
            e.preventDefault();
    });
});

However, I would try to define 'mobile' as something else, e.g., a browser that supports touch events.

Upvotes: 0

Paul D. Waite
Paul D. Waite

Reputation: 98946

I don’t think there’s a CSS-based solution (CSS isn’t really designed to change the behaviour of HTML elements).

You could use JavaScript on page load to check the width of the browser’s viewport, and then find and disable/remove the links if the viewport is phone-sized.

See PPK’s ‘A Tale of Two Viewports’ article to figure out which JavaScript properties to check to figure out the width in your situation (I haven’t done enough mobile development to remember off the top of my head).

Upvotes: 0

Related Questions