HTML Form Changes Webpage Size due to Mobile Keyboard

Question

I am attempting to write the front-end of a basic logon form for a website. I am a novice web developer and have run into some problems when designing the mobile version of the website. You can find the source code to my website here and an image of the form on my website here .

The website is designed to only display the UI when the screen width is greater than 1024px or when the screen width is less than 1024px and the device is in a portrait orientation. This is intentional, and when these specifications are not met this is displayed.

However, when I am in portrait mode and I click on the form, this is momentarily displayed. It quickly disappears however, and I'm pretty sure this is because once the webpage displays the "unsupported screen size" page, the form no longer exists on the webpage. This makes the keyboard slide down and the page go back to normal. To solve this issue, I referred here , but the webpage still did not work.

I then tried to remove the "unsupported screen size" page (this source code can be found here ), but then this results when I click on the form. I'm pretty sure this is because I've set the height of html and body to 100%.

Ideally, I'd like to produce a webpage which retains the "unsupported screen size" page when the screen size truly is unsupported (or is in the wrong orientation), but when the form is clicked on the mobile site, I'd like to make the original webpage not change size but make it scrollable on top of the keyboard. Again, I'm a novice (this is my first time in front-end development) and I'd appreciate any help or advice for me to resolve this problem. Thanks in advance.

Answer 1

When I've done simple projects and I want to hide on some type of device I will use css @media rule like the following example (resize your window to see the text change)

 @media only screen and (max-width: 768px) { .small-screen{ display:inherit; background-color: red; } .large-screen { display:none; } } @media only screen and (min-width: 769px) { .small-screen{ display:none; } .large-screen{ display:inherit; background-color: blue; } }

 <span class="small-screen">show me on a small screen</span> <span class="large-screen">show me on a large screen</span>

Answer 2

i had a similar problem with a form and the keyboard on mobile. when i would press on an input field the keyboard would pop up and change the page height to be smaller than the width, which would make the landscape rules apply, even though in practice the device was in portrait.

my solution was to apply the same rules i used for portrait, for the same max width in landscape.

that would look similar to this:

@media screen and (max-device-height:900px) and (max-device-width:415px) and (orientation:portrait){portrait rules}

@media screen and (max-device-width:415px) and (orientation:landscape){portrait rules}