CODEWITHSUNDEEP
javaiosgwtmobile-safari
Joeri
Joeri

Reputation: 1

How to make page display correctly when changing viewport meta after zooming?

We're creating a mobile application (in GWT) which will be displayed as an overlay on the page. The page itself contains content out of our control and doesn't have the viewport meta tag. The content on the page isn't optimized for mobile view, but our application in the overlay will. So the page is likely to be zoomed, but for our application, the viewport needs to be changed so it is fully displayed.

To optimize the display and making the application appear full screen, in the app startup phase, the viewport meta tag is changed/added with the following content
width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes
This works perfectly unless the user first zoomed the page (either in or out). When the user first zoomed (in this case zoomed out), the viewport is changed but the viewport isn't scaled back to the browser viewport.

To illustrate this issue, I've created a screen recording: First I zoom out, but as the whole page is already visible, it jumps back. Then I click the button and after 1 second, the viewport meta tag is added. Now the browser background is shown.
View

When I don't zoom before clicking the button, it works correctly.

I've tried calling resize, deferring the viewport meta tag, changing the content of the viewport tag. Nothing helped so far.

When the device is rotated, or when a user zoom action is done, the content will match the browser viewport.

I've created some example code for it (GWT/Java):
GWT example code

Upvotes: 0

Views: 483

Answers (1)

Daniel Kurka
Daniel Kurka

Reputation: 7985

From what I know ( and a build quite a lot of knowledge about this while building http://www.m-gwt.com/) there is no support for dynamically changing the viewport. I toyed around with it (about two years ago) and I was not able to get this working as expected.

Maybe this has changed in the mean time....

Upvotes: 0

Related Questions