webapp movement

Question

i have created a webapp using only html css javascript using iui library i have few pages and all the content is inside one html page and for page navigation and slide effect i have used iui framework

when there is lot of content i can scroll vertically up and down which is fine however what i have also noticed is if i drag the page horizontally either left to right or right to left and also if i drag the page from top left diagonally the entire page is moving in those directions which is not good

i would like this movement to be locked and even if i use the finger to slide across or diagonally the page should stay fixed and should only move vertically up or down

do i need to write any meta tag to avoid this movement.

using only html css and javascript is there a way to fix this or are there any other alternatives without creating the app natively using xcode

Answer 1

If the webpage is wider than the width of the viewport then the behavior you describe will occur. However if you ensure the content width is set to 320px (and no child transparent-ish elements are pushing content past that demarcation point) then you shouldn't be able to scroll sideways.

If that's not working for you, you should be able to use the touchstart/move/end events and disable the default behavior in javascript using preventDefault() on the event object - http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Answer 2

Hey Sudhakar! Why not using the list?

First, check if your viewport meta is correct. Then, perhaps a media (image) is larger than the global viewport.

Last, this could also due to a width: 100% + some padding/margin. To fix that, box-sizing: border-box; could be your friend

R.