Deshabilitar enlaces para dispositivo iOS usando CSS

Tengo una galería de imágenes, las imágenes son lo suficientemente grandes como para llenar una pantalla de iPhone.

Las imágenes también son enlaces, por lo que, como puede imaginarse, el desplazamiento se vuelve bastante frustrante en el iPhone porque constantemente hace clic en los enlaces por crash.

¿Hay alguna forma de evitar esto usando css solo?

Si no, ¿cuál sería la solución más simple a este problema?

¡Gracias!

Sugiero usar el Javascript. Sin embargo, encontré una manera de usar solo CSS. Primer paso, necesitará identificar el browser del cliente, solo agregue el código a continuación en su session HEAD en el file HTML:

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

Solo si el cliente usa un browser en el iPhone, se cargará el contenido de "iphone.css".

En este file "iphone.css", necesita crear una class para deshabilitar los enlaces:

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

En su código HTML de la galería, agregue las references en sus enlaces:

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

Estos pasos solo funcionan en iPhone / iPod touch, pero si miras mi segunda reference, verás la forma de adaptarte para iPhone 4 / iPod touch 4G:

No creo que exista una solución basada en CSS (el CSS no está realmente diseñado para cambiar el comportamiento de los elementos HTML).

Puede usar JavaScript en la carga de la página para comprobar el ancho de la window gráfica del browser, y luego search y desactivar / eliminar los enlaces si la window gráfica tiene el tamaño del teléfono.

Consulte el artículo 'A Tale of Two Viewports' de PPK para averiguar qué properties de JavaScript se deben verificar para calcular el ancho de su situación (no he hecho suficiente desarrollo mobile para recordarlo desde el principio).

Me gusta la idea de pointer-events: none; , pero no lo usaría porque no está bien soportado .

Si definimos un dispositivo mobile como un tamaño de pantalla determinado, haría algo como esto:

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

Sin embargo, intentaría definir 'mobile' como algo más, por ejemplo , un browser que admita events táctiles.