Page Resize in Fixed Narrow Viewport

[iwato]

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"

Roddy

 

 

 

 

[dsonesuk]

Does using width: 100vw; make a difference? Then make input width proportional in vw also.

[Ingolme]

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.

[iwato]

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.

Roddy