0

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.

Stack Overflow
  • 1
  • 1
    There are a ton of links in this question that force people who would like to help you to go to off site resources just to understand your question. Please reduce the number of links in your question, and make your question detail your issue on it's own. Please review [ask] and [mcve] for more information. – Taplar Feb 19 '19 at 22:53
  • To add to Taplar some of those links are downloads and I am definitely not downloading anything. I imagine many feel the same way. SO provides a way to upload images right into your answer as well. Questions are very hard to follow when you have to open a bunch of tabs to keep track of the question. – lloyd Feb 19 '19 at 23:47

2 Answers2

0

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>
lloyd
  • 1,089
  • 1
  • 17
  • 39
  • I have used the media rule in my code. I just need to know how to prevent the page from resizing when the mobile keyboard pops up, even if the webpage is behind the keyboard. – Stack Overflow Feb 19 '19 at 23:17
0

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}
Rtzoor
  • 308
  • 2
  • 11