I know similar questions have been asked but I have found no solution of any kind for my issue. I am building a mobile web app that has a google map embedded into it. My issue is that if a user double taps on it to try and zoom the map (which basically takes up the whole screen) it, in some cases, zooms in the browser instead of the map. Then the trouble is that the user is unable to zoom back out. Using two fingers to zoom out passes the event to the map instead of the browser and then renders the web app useless. Reloading the page keeps it zoomed in. I understand that browsers typically don't allow the script to change the browser zoom because 'controlling UI for the user is a bad idea' but in this situation I am saving the user. I don't want to do it while viewing the page, just either on load (the user will undoubtedly try and reload when they can't view/use the web app right) or on a button click.
To the best of my knowledge after quite a bit of googling on this, it is indeed not possible to change the browser zoom once the page has loaded. However, you can make a request to the browser, prior to loading the DOM, to start at a certain zoom level and/or to limit the zoom. Here is the meta tag I used to do this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
I think for the most part the attributes are pretty self explanatory, and if you are needing more/different control I'm sure there are more options to play with. Also, keep in mind this is also entirely up to the browser on whether or not it wants to follow this.
Related
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 am developing a website where links open in an iFrame. This keeps everything in flow. It works pretty well on computers but on mobile devices it lags a bit specially on chrome.
When user cliks a link the website is loaded in a modal in iFrame. Is there any way I can make sure that the scrolling is still smooth on mobile devices and speed up the load times of iFrame some how?
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
try :
<meta name="viewport" content="width=device-width, initial-scale=1">
Mobile browsers like render pages in a virtual "window" (the viewport), usually wider than the screen, so they don't need to squeeze every page layout into a tiny window (which would break many non-mobile-optimized sites). Users can pan and zoom to see different areas of the page.
Mobile Safari introduced the "viewport meta tag" to let web developers control the viewport's size and scale.
So your iFrame pages suppose to have the meta tag.
I have an HTML/Bootstrap/JavaScript project that seems to scale in such a way that it looks best at 125%.
Is there a way to force the browser to start at 125%? I've tried
<meta name="viewport" content="width=device-width, initial-scale=1.25"/>
But that did not seem to work.
Any help would be appreciated.
I wouldn't recommend giving your page an initial zoom. It is an unnecessary hack that could look different across browsers, but even if it looked the same, why not use CSS and HTML to give the page the look you want? Zoom is an accessibility feature for users and shouldn't be controlled by the site itself. You could just rewrite the CSS so that it has the same look as the 125% zoom.
And to reiterate, cross browser issues are also a problem, which is another reason to just use CSS/HTML to get the effect you want.
I know this is an old question, but after trying all the proposed methods, nothing seems fit.
Basically, I built this webpage, it looks fine when just loaded with a mobile device, but after screen rotation the size stays the same, (which it should not!)
1:
The first method I tried is adding the meta tag:
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=1" />
But apparently this does not work
2:
Then I tried window.location.reload
This works! Just perfect. But it basically reloaded the whole page, and all the previous setting will be reset to the default, this is not what I want!
3:
I see someone suggesting writing two sets of css, one for landscape and one for portrait. However, this is a lot of work right?
And, in my css I did not set a lot of explicit height and width anyway. Usually it's default, and sometimes in percentage. Is this a problem?
#
It will be great if someone explain a little what actually happens when the screen rotate? Why elements are not resized properly? And on contrary, why they will be resized properly if a reload event is triggered?
This depends on which mobile browser you're testing on; some mobile browsers, notably IE10, don't report a change in screen size when the orientation changes. However, as you found out the browser does recalculate the screen size when the page is refreshed.
If you can tell us about the browser, maybe we can help more?
So I am developing a WEB app for iPad and have a problem with device rotation. Depending on the initial orientation when the orientation changes the page appears zoomed in. Now the user can simply pinch to return to an acceptable experience, but that is not nearly good enough. So here is what I want to do. I want to trigger a 'pinch' event with javascript that would behave the same as a real user zoom out.
However I am not sure this is even possible, as I have had zero success triggering touchmove events. Plus I would have to trigger 2 touchmove events moving toward each other.
$('body').trigger('touchmove' ... how would I pass in X and Y?
Now I saw this example in jQuery's documentation:
var event = jQuery.Event("logged");
event.user = "foo";
event.pass = "bar";
$("body").trigger(event);
which makes me think passing data into a triggered event object is possible, but how would a full pinch be triggered?
I may be misunderstanding your question, but are you not simply trying to stop the page from needing to be pinched?
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
This will tell the device that you have designed the page for iPad and that it does not require scaling!