I have an onsen UI/jquery-based mobile app in which the first page has a nonscalable viewport (=1). On clicking an element on the main page, the second page with a toolbar/content is pushed on this page and a pdf is displayed. Everything works fine as pdf is nicely rendered and all buttons on the toolbar work. No issue with no scaling on the first page and scaling on the second page as I use jquery to change viewport as desired.

Issue: On pitch/gesture change the toolbar scales along with pdf as they are in the same viewport(same HTML page). I won't stop the toolbar/navigation bar from scaling as it looks ugly and at times when the scale is high the toolbar almost takes half the retail space of the mobile device. The scaling of the pdf is up to 10.

Tried creating my gesture change/touch function and it works but it is not as smooth as the default viewport of the browser.

Is there any way the toolbar can be prevented from scaling?