Jump to content

Page Resize in Fixed Narrow Viewport

Recommended Posts

MOTIVATION:  It is sometimes said that time heals all.  With this in mind I am hoping that the W3Schools community has advanced since the last time that I communicated and has found a solution to the following problem.

BACKGROUND:  Recently I created a new webpage that can be found at www.publiustwo.com/ali.  If you open this page in an iPhone with a vary narrow viewport such as my own, you will observe that filling in any of the form items that require text input,  and in several cases even those that do not, causes the width of the document to increase beyond the size of the available viewport and does not return it to its former size after the input has been completed.

QUESTION:  It would appear that there are two solutions to this problem:  one, prevent the size of the page from expanding in the first place; two, cause the size of the page to retract after the entry has been completed. Has anyone found a solution to this problem"






Link to post
Share on other sites

It's a "feature" built into iPhone browsers. If you make sure that the font size of the text inside your inputs is at least 16px then iPhone won't try to zoom in to see it.

  • Thanks 1
Link to post
Share on other sites

Hi!  Thank you for your quick response.  As it is my goal to have this page ready and working by Monday, I have selected Ingolme's response as the easiest to implement fix.

input, textarea, select {
	font-size: 16px;

In the end, I have not yet grown accustomed to the use of the vw unit, and still have to build a data base and create the PHP to handle the task of data transport and storage before my self-imposed deadline.

Many thanks to both Ingolme and dsonesuk.  I am happey to see that you  are both still around at W3Schools.



Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...