CODEWITHSUNDEEP
javascripthtmlmobiletoolbarfixed
user848192
user848192

Reputation: 41

Mobile Fixed topbar on zoom in/out

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.

Upvotes: 4

Views: 2296

Answers (2)

user2933336
user2933336

Reputation: 21

I solved the conflict between fixed position and zoom by adding

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

to the fixed tag. Hope this can help.

Upvotes: 1

kaleazy
kaleazy

Reputation: 6232

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:

Hopefully this helps!

Upvotes: 1

Related Questions