Mobile Fixed topbar on zoom in/out

Question

I'm trying to implement a fixed topbar for mobile devices in HTML5 that also stay fixed when the users zoom in/out the webpage.

As far as I saw on Jquery mobile they disable the zoom in/out in order to achieve a fixed topbar.

Google made its own content scrolling implementation to make the fixed topbar for the gmail application. But they also disallow the zoom.

Does anyone know a workaround over this? Do know If I can relocate the bar at the top of the new area with js when they zoom in/out?

Update: I found this post where there's an example of a fixed top bar that doesn't disable the zoom but when you zoom in/out it doesn't stay at the top.

Also I was seeing the docs for Safari on IOs but I can't find a way to get the relative position of the new zoomed area so I can relocate the bar at the top of it on every zoom in/out event.

Shanta

You basically need to know that user zoomed. For that you need a zoom event like resize event. Which apparently doesnt exist :) #996414 Check the answers there if you are deliberately in need of this. There are suggestions like polling and relying on resize event when supported. – Sweetsop

Answer 1

Apple has implemented a special META tag to handle zooming:

<meta content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

This disables zooming on the iPhone, and it should work on Android as well.

As for your desired zooming effect, my advice would be to disable zooming completely and do 100% of this using jQuery and CSS webkit transitions and animations.

#some-div {
    -webkit-transition: all 0.5s ease-out;
}

Here are some other jQuery libraries that do zooming:

• http://flwtb.co/VKTQ1C
• http://flwtb.co/VKTTdW

Hopefully this helps!

Selector

Answer 2

I solved the conflict between fixed position and zoom by adding

"data-disable-page-zoom="false""

to the fixed tag. Hope this can help.

Zeidman