CODEWITHSUNDEEP
javascripthtmlipadsafarimobile-safari
fenix2222
fenix2222

Reputation: 4730

How to disable screen offset in iPad safari when keyboard is shown

I have a web application that is used on the ipad. Application will normally be saved on home screen and it will work in full screen mode. I have used the following meta tag to disable scrolling, zooming and drag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

I don't want users to be able to move the screen, scroll or zoom. Everything works perfectly until user clicks on the input field and virtual keyboard shows up. When keyboard is shown I can now move the screen and screen also gets offset by about 10-15px from the right. This is weird and I dont want that. I still want keyboard to show, but I dont want it to break my screen fixed setting... Anyone can help?

Upvotes: 2

Views: 2057

Answers (1)

Dcullen
Dcullen

Reputation: 669

This can happen if you have some content extending off the page view area. If you contain the site within a block element with "overflow: hidden" set, it should prevent this behavior.

You will also want to add the following code to prevent dragging.

document.addEventListener('touchmove', function(e){ e.preventDefault(); });

Upvotes: 2

Related Questions