Geek Answers Handbook

Viewing problem

<w1030 "

There is a problem viewing in the vertical orientation of the mobile device. As you can see, there is an empty space below the footer that fills the screen. If I rotate the orientation horizontally, the viewport works fine, the same goes for tablets, desktop, etc. This question remains only in the vertical orientation of the mobile device. Is there any way to fix this?

I already have this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+6
source share
4 answers

You need media queries:

  • Start with your mobile (base) styles first in your CSS (usually a single column layout).
  • Then use media queries using the minimum width, at higher viewpoints of the view (here you will apply grid styles).
  • Use each each large breakpoint of minimum width to override the previous styles to provide an appropriate layout based on the size of the viewport.
  • Be sure to use the <meta name="viewport" /> in your html to ensure optimal mobile presentation.

Using cascading queries across the width of the mini-width will let you know exactly what properties are applied based on the width of the screen, and make troubleshooting your css easier.

Edit - added links to media request links:

The first mobile example is a single column on small screens and two more columns with a change in the color of the frame 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>
+3
source

I'm not sure that "marks matter, but you can always try.

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

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

Change 1 . Try working with media queries if this solves the problem https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

+3
source

Mobile browsers change a bit differently. For example, Mobile Safari often simply zooms in on a page when switching from portrait to landscape, rather than laying out the page as if it were originally loaded into the landscape. If web developers want their zoom settings to remain the same when switching the orientation on the iPhone, they should add a maximum zoom value to prevent this zoom , which sometimes has an undesirable side effect that prevents users from zooming in:

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

More info

Hope this helps.

+3
source

Have you tried the maximum scale?

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

More articles:


All Articles