0

I have an application that contains a main screen and an edition popup. Both are divs, with the popup div having a bigger z-index, and covering the whole screen :

<div id="my-main-screen">
  <!-- ... -->
</div>
<div id="my-popup" style="z-index: 1; width: 100%; height:100%; top:0px; left:0px">
  <!-- ... -->
</div>

My problem is the following :

  • On mobile, focusing in and out of text fields in my popup shows and hides the virtual keyboard, which triggers a window's resize event.
  • Resizing also resizes the main screen div, which is useless and slow, because my main screen is rather complex
  • The result is that focusing in and out of text fields in my popup div feel slow and irresponsive.

I tried hiding the main screen div. It works when in the popup... but then when I close the popup I have to make the main screen visible again, and that is as slow as resizing.

Is there a way to disable resizing on just the main screen div, without hiding it ?

yannick1976
  • 10,171
  • 2
  • 19
  • 27
  • I have not tried this myself but I think you should try what they are describing in this thread: http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone – Kamelkent Nov 05 '15 at 13:32
  • @Kamelkent the question you're referring to is about auto-zooming. Mine is about the window being resized to make room for the virtual keyboard. – yannick1976 Nov 05 '15 at 13:35

1 Answers1

0

Shot in the dark, but you may try to set maximum scale to 1 in your viewport tag to make your document not to scale on mobile devices...

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
markoffden
  • 1,406
  • 1
  • 15
  • 31