pinch-zoom ios lightbox
-
Hi, this refers to this thread:
http://laythemeforum.com:4567/topic/5122/lightbox-and-touch-gestures-on-ipad-and-some-phones/11maybe there was a misunderstanding, when Marius asked me to post the problem again in a shorter form.
Here it is:
pinch-zooming into lightbox-images on ipad works (should be prevented) and then breaks the layout and the functionality
Can I either prevent pinch-zoom or somehow keep the grid working? Disabling Lightbox completely on ipad is no option.
The other problems are more or less solved.
Please try to hint at a possible solution fpr this one.
thank you
Mike -
Dear @mpgf
Ok, thank you for writing. We will have a look also with Armin and hope to get back to you as soon as possible.
Thank you for using LayTheme!
Marius -
Hey @mpgf
The ability to disable pinch zoom on iOS was deactivated by Apple years ago.
You could try to include this script into your website in your <head> in lay options -> custom html and css:
https://stackoverflow.com/a/49926070However, I'm not sure if that will work out.
Of course the layout shouldn't break when zooming into the lightbox.
I will write this down and work on it one day. However, right now I need to finish this bigger update that i've been working on for lay theme.So please let your client now I'll work on it and it will be fixed but you'll need to wait a little.
-
Hi Armin, hi Marius,
as i mentioned in my last e-mail (still waiting for an answer to that, some working js-code would be the easiest solution) unfortunately waiting until "one day" is no option - i have tried a workaround and found two options to not have to disable lightbox and desktop-layout completely for all smaller screens and devices, but just for ios:
- i can either detect the operating system via js and could use the result to add a class or whatever to specific elements
- or (more user-friendly) i could use a css @supports query with a specific content which only works in ios, i have tested this on all browsers in android and ios and it seems to work.
The problem with both ideas is:
I can make minor changes to the layout easily, but I cannot access the dynamically created css and content to disable grid layout, enable mobile menu, disable lightbox and so on - it would be similar to having a second breakpointCan You please help me with this.
Only other solution i see would be to set the breakpoint for mobile layout to 1024 px, which would be the last option and really a shame, as the layout in general works, looks and feels good except for the zooming-problem.
Thank You
-
another approach to solve this - this code is supposed to work to prevent zooming:
Head:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />
<meta name="HandheldFriendly" content="true">CSS:
html {-webkit-text-size-adjust: none}But it does not - the css part is automatically disabled. is that the reason, why it doesn't work? Is there a way to change this easily?
-
hey so with the latest lightbox update when the lightbox is opened on a iphone it wont be pinch and zoomable anymore
I also code custom websites or custom Lay features.
šæ Email me here: šæ
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options ā Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it