10

Sencha - I have a webapp with a registration form that works correctly on Safari. However, for some reason when adding the page to home screen (using ios webview) this issue appears:

When I click on a text field the keyboard is not zooming to the specific field that was selected. In order to start writing to that text field, I need to press again on the text field.

I am using sencha.

Stephen M -on strike-
  • 1,037
  • 8
  • 28
ItzikEdar
  • 207
  • 1
  • 2
  • 9

2 Answers2

28

I found the solution for iOS 7. Use the following meta tag in your HTML pages:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
J. Furr
  • 396
  • 3
  • 3
  • You can't imagine all the time I've wasted with a JavaScript fix for this problem. Your solution just saved my day. – Justin Noel Oct 10 '13 at 00:24
  • 1
    It does solve the issue, but partially. With `height=device-height` has the content the same size as the device, including the height of the top status bar. Which makes the content actually higher that the available space (below the status bar). It could be combined with the meta tag: `` to make the content go below the status bar, but it doesn't give the appearance I expected. – Mart Oct 22 '13 at 12:13
  • 1
    `height=device-height` seems to be the option that fixes it. If I remove it it stops working. – Martin Thurau Nov 13 '13 at 12:01
  • 2
    It fix this issue, but there will be unwanted overflow scroll will appear to the body element. Any work around to fix – peterkr Dec 20 '13 at 16:18
  • Bothered me quite some hours... Thanks for the fix! – wzr1337 Jan 01 '14 at 16:42
  • 4
    Great fix. Thanks. By the way: I've got a landscape only app and `height=device-height` set the height to the portrait orientation height. When I used `height=device-width` it's working nicely. Might be helpful to some. – Thomas Jan 02 '14 at 12:05
  • 2
    Please note that the `target-densityDpi=device-dpi` attribute on the meta tag has been deprecated in WebKit. See: http://stackoverflow.com/questions/11592015/support-for-target-densitydpi-is-removed-from-webkit – Wally Lawless Jan 08 '14 at 14:45
  • @Thomas: I have found that on iPad, setting height=device-width works perfect for any orientation. Strange,but it works!! – Nilesh Jan 29 '14 at 00:42
  • This actually did not work for me. With or without `height=device-height` iOS7 on an iPad still resizes the page when the keyboard opens and closes. – CodingWithSpike Feb 12 '14 at 14:16
  • this seems to kill any fixed position headers, e.g. jquery mobile. http://stackoverflow.com/questions/11804428/jquery-mobile-height-issue-for-iphone-web-app-assumes-page-height-of-480-instea – Adam Marshall Apr 03 '14 at 14:52
  • Can anyone please tell me how to incorporate this fix in sencha touch 2.1. I am trying to build it after adding this meta tag to the index.html file, but the issue is still there. Any help would be appreciated. Thanks. – Sudershan shastri Aug 28 '14 at 05:42
3

I faced the same issue. In my case i am using jquery mobile and to solve this issue i added the attribute "autofocus" to the input field.
This seems to simulate a first tap on the field whereas the tap by the user opens the keyboard and he will be able to write to the field.
Hope this helps.

George
  • 125
  • 7