I am working on an app that will have web content, living in a web view, and some other content and views built using react-native. I have a meta tag viewport with config user scalable is yes.
But my problem is I want when I zoom my web view, some span have content HTML not zoom out with another content and that text keeps current size. I found an example in the mail app detail view in Gmail.
Thanks!
In zone 1, this text does not change the font when zoom,
In zone 2, content zoom out
I know exactly what you are asking for.
If you use GMail on a mobile device, zooming in will cause the email to zoom in, but not the header of the email. However, if you zoom in on the header itself, it will zoom in at that point.
What you are looking for is how to handle multi-touch interactions.
GMail does this by preventing the default behavior of the zoom in when zooming on a target element. In this case, the email body.
When zooming in on the header, it is no longer preventing the default behavior.
It's not a trivial thing to implement. You'll need to take some time to read up on multi-touch interactions. You can find great info over at MDN.
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Multi-touch_interaction
Related
I am building an admin panel for a client using the Metronic theme. Accessibility is not important to the client and responsiveness is not too important either since this application will only be used on desktops/laptops. Zooming into the application breaks the appearance of some components.
Would it be possible to replace zooming with magnification (the behaviour achieved by pinching and zooming on a laptop trackpad).
To help you visualise what I mean I used StackOverflow as an example;
StackOverflow without zooming/magnification;
StackOverflow when zooming in (Ctrl+Shift+Plus);
StackOverflow when magnifying (Pinch and zoom on a trackpad);
I want the third behaviour to happen when zooming regularly also. I have tried adjusting the meta viewport tag but according to this post and many others, viewport is only for mobile devices. There is also no zoom event in JavaScript to do try to see if e.preventDefault would make it work.
Even if I end up having to make everything responsive anyways it would be interesting to see if this is possible.
I have a desktop web app (skyviewcafe.com) that I’m trying to make more mobile-friendly. As one step in that process, I’ve taken a star chart and made it touch-draggable, and also made a view of the orbits of the planets both draggable and zoomable with touch gestures.
But here’s an interesting problem that I imagine must have happened to others before: It’s possible to use the default panning and zooming behavior of a mobile web browser to move my web page around until the only thing in view is a component that itself takes over touch gestures using preventDefault.
Once this happens, it’s impossible to zoom back out and bring the whole web page back into view. All pinch/spread zooming is sucked in by my component. For lack of a better term, I’m calling this a “zoom trap”. I’ve tried to search online for any discussion of this problem, but can’t find the right words to match anything.
I came up with an ad hoc solution that’s currently deployed at http://test.skyviewcafe.com. If I’m in a “zoom trap” I can touch the screen with three fingers and a translucent gray panel comes up to block touch gestures from reaching my touch-responsive canvas. Normal default web browser pan and zoom then becomes possible again, and the user can zoom back out. After that, touching with three fingers again clears the gray panel out of the way.
While this solves the problem in a way, it’s not a standard well-known gesture, and it would be hard to provide enough on-screen prompting to make necessary gesture clear.
Ideally I’d like to be able to respond to a standard gesture like a double-tap by zooming out the web page, but as far as I can tell, other than the initial zoom factor when a web page loads, web browser zooming isn’t something a web app can control dynamically.
Has anyone else run into this problem? Are there standard touch gestures for dealing with this? Are there ways in JavaScript that I haven’t discovered yet to dynamically control mobile web browser zooming?
I've a problem in my application. Native browser zoom in mobile devices don't fit my needs...
I've 3 main parts in my mobile web page.
Header
Main content area (there will be scroll inside this if content will increase)
Footer
If i use native zoom of mobile browsers then my whole page gets zoomed..
but i don't wants zoom effect in header and footer..
What i wants is to implement native browser zoom effect only in content area..
So please give me some guideline how it is possible to achieve this without any errors or cross browser issues?
When a user focuses on a text input, mobile browsers zoom in for convenience. This is good.
But on a single page app, you don't refresh the page upon the form being submitted, so the viewport doesn't return to its non-zoomed state. This makes it difficult for the user to get their bearings again, or navigate as they did before. It is possible for them to double tap, to return the viewport to normal, but many of our users wouldn't know to do that.
I believe I am asking the same thing as the following questions, none of which provide a reliable answer. I would strongly prefer not to have to include another JS library.
Mobile-friendly web design: How to programmatically zoom out after text input?
Mobile Viewport zoom back
We're developing an app using Trigger.io in conjunction with Jquery Mobile 1.1.1. We're aware of the modifications to the viewport meta tag in JM to enable or disable zoom, but in another Stack question about Trigger.io, one of their devs mentioned they disable zoom at the webview level: Preventing zoom with trigger.io forge
We would like to enable zoom when displaying a large image on the page - is this possible using the Trigger framework?
yes we do disable zooming in the WebView: if you include a large, unscaled image in your HTML, the user will be able to scroll around to see the full image, but pinches won't work.
Of course, you could have the image down-scaled to start with, then blow it up to full size when the user clicks on an icon? Libraries such as iScroll4 might help here too.
Also, we would be able to make the WebView's zooming behaviour somewhat configurable (although we would always default to making it non-zoomable). Get in touch with support#trigger.io if you absolutely need different behaviour.