Viewport issue on normal orientation mobile [closed]

Question

There is a viewport issue on vertical orientation of the mobile.As you can see,below the footer,there is a white space which fills the screen.If i turn the orientation on horizontal, the viewport works fine,same for tablets,desktop,etc..this issue persists only on vertical orientation of the mobile.Is there any way to fix this?

I already have this metatag:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Answer 1

You need use media queries:

1. Start with your mobile (base) styles first in your CSS (This is typically a single column layout).
2. Then use media queries using min-width at progressively larger viewports breakpoints (This is where you would apply your grid styles).
3. Use each each larger min-width breakpoint to override the previous styles to provide an appropriate layout based on the viewport size.
4. Make sure to use the <meta name="viewport" /> tag in your html to ensure optimal mobile presentation.

Using Cascading min-width media queries will allow you to know exactly what properties are being applied based on the screen width and make troubleshooting your css easier.

Edit - Added media query reference links:

• Media Query Logic
• 7 Habits of Highly Effective Media Queries

Mobile First Example - Single column on small screens and two columns larger with a border color change on even larger screens

div {box-sizing:border-box; width:100%;border:solid 1px red;}

@media only screen and (min-width:37.5em) {
   .half {
       float: left;
       margin: 0;
       width: 50%;
   }
   .row:after {
     content:"";
     display:table;
     clear:both;
   }
}

@media only screen and (min-width:50em) {
   div {border:solid 1px green;}
}

<div class="container">
    <div class="row">
        <div class="half">Stuff 1</div>
        <div class="half">Stuff 2</div>
    </div>
    <div class="row">
        <div class="half">Stuff 3</div>
        <div class="half">Stuff 4</div>
    </div>
</div>

Answer 2

Mobile browsers handle orientation changes slightly differently. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

More Info

I hope it helps.

Answer 3

I'm not sure if the " marks make a difference but you could always try.

<meta name=viewport content="width=device-width, initial-scale=1">

https://developers.google.com/speed/docs/insights/ConfigureViewport

Edit 1: Try working with Media Queries if that solves the problem https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 4

Did you try maximum-scale?

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">