All geek questions in one place

Div remains the same width when rotating the ipad from portrait to landscape

I am currently developing my first web application and am facing a problem. When the application is open, the navigation div along the bottom (in the photo below) is displayed perfectly, the same way when I rotate the iPad to the portrait. But when I turn from portrait to landscape, it seems to maintain the same width, at least until I touch the screen. This is not a serious problem, as it returns to normal when I start to scroll, but its a bit untidy look. I have added some images:

Portrait:
enter image description here

After turning from Portrait to Landscape: enter image description here

This is the CSS I use for this div:

nav {background-image: linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%); background-image: -o-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%); background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%); background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%); background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.15, rgb(0,0,0)), color-stop(0.69, rgb(51,51,51))); border-top: 1px solid #000; text-align: center; position: fixed; bottom: 0px; left: 0px; width: 100%; height: 51px; color:#CCC; font-size:11.3px; font-weight:bold; overflow: hidden; margin: 0 auto 0;}

Is there a way around this and if the div automatically fills the width of the screen without touching the user?

+4
source share
3 answers

I ran into this problem twice. The first time I had to change the meta tag of my view from

 <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale = 1.0">

to

 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

but next time this will not happen, despite the fact that it is essentially identical to the structure ... this time I had to use media queries, so in CSS I set the footer position:fixed;bottom:0;width:100% but followed him:

 @media screen and (max-device-width: 480px) and (orientation:landscape) { #navbar{width:480px;} #foot{width:480px;} } @media screen and (min-device-width: 481px) and (orientation:landscape) { #navbar{width:1024px;} #foot{width:1024px;} }
+2
source

I think this could be due to your width property instead of setting it to a fixed pixel, why not setting it to 100%?

I tested it on an emulator, but not on the device itself. It seems to work fine on the iOS simulator.

Here is an example of what I mean:

 <html> <head> <style> #nav{ position:fixed; bottom:0px; left:0px; height:40px; width:100%; background:blue; text-align:center; } </style> </head> <body> <div id="nav"> <p>My Navigation bar</p> </div> </body> </html>
0
source

How about fixing this ?

 @media screen and (orientation: landscape){ .fix-orientation { background:red; } /* This will cause a style recalculation */ }
-2
source

Source: https://habr.com/ru/post/1390932/

More articles:


All Articles