Do browser address bar values affect CSS media queries?
While I was writing media queries for my website, I'm talking about this: Does the browser address bar affect CSS media queries?
When I code this:
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (orientation: portrait) {
}
Am I considering the height of the address bar of browsers? Does the address bar output pixels to the on-screen viewer?
Should I consider this media query?
/* Portrait */
@media screen
and (device-width: 320px - <AddressBarHeight>)
and (device-height: 640px - <AddressBarHeight>)
and (orientation: portrait) {
}
source to share
device-height
and device-width
have nothing to do with what is displayed on the screen. They only reflect the overall dimensions of the screen.
Width device
The device width function describes the width of the rendering surface of the output device. For solid media, this is the screen width . For paged media, this is the width of the page sheet size.
Height device
The device-level media function describes the height of the rendering surface of the output device. For solid media, this is the screen height . For paged media, this is the height of the page sheet size.
Example
I am using a 1920x1080px monitor as an example. Using a media query that targets device-width
exactly 1920px and device-height
exactly 1080px, the below code snippet on my monitor displays a red background, although the snippet itself is limited to a much smaller area (660x201px)
@media (device-width: 1920px) and (device-height: 1080px) {
body {
background: red;
}
}
Result (image)
source to share
No, you don't need to take that into account, because device-width
and device-height
are values for the entire display of the device. However, the functions width
and height
describe the width and height of the actual render space.
So, for example, if yours device-height
can be 640px, the actual height
in the viewport can only be 580px. Some CSS you might consider just targeting the viewport of certain sizes.
/* Portrait */
@media screen
and (min-width: 320px)
and (min-height: 580px)
and (orientation: portrait) {
}
Are you looking for ways to hide the status bar because it takes up too much real estate. There are several options for this. The one I've used with success is some Javascript:
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1);
}, 0);
});
This waits for the page to load and scrolls one pixel, which will hide the address bar, this won't delete it permanently.
There is also a meta tag that can be used to hide the status bar on iOS devices.
<meta name="apple-mobile-web-app-capable" content="yes" />
source to share