5

While I was writing media queries for my website, I though about this: Does the browser's address bar affect the 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 the browsers? Does the address bar subtract pixels to screen viewport?

Do I have to consider this media query?

/* Portrait */
@media screen 
  and (device-width: 320px - <AddressBarHeight>) 
  and (device-height: 640px - <AddressBarHeight>)  
  and (orientation: portrait) {

}
Andrea Giachetto
  • 177
  • 1
  • 1
  • 8
  • You're using device height / width, so you're looking for the physical size of the device's screen. – BenM May 05 '15 at 13:30
  • No, only the viewport. Your page doesn't know anything about the browser's chrome (UI elements outside of the rendered page). – joews May 05 '15 at 13:36

3 Answers3

4

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 as a whole.

device-width

The ‘device-width’ media feature describes the width of the rendering surface of the output device. For continuous media, this is the width of the screen. For paged media, this is the width of the page sheet size.

device-height

The ‘device-height’ media feature describes the height of the rendering surface of the output device. For continuous media, this is the height of the screen. For paged media, this is the height of the page sheet size.

– Media Queries W3C Recommendation

Example

As an example, I'm using a 1920x1080px monitor. Using a media query which targets a device-width of exactly 1920px and a device-height of exactly 1080px, the below code snippet on my monitor will display a red background, even though the snippet itself is confined to a much smaller area (660x201px):

@media (device-width: 1920px) and (device-height: 1080px) {
  body {
    background: red;
  }
}

Result (Image)

What I see

Community
  • 1
  • 1
James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • Thank in advance for your time and answer! But how can we handle the address bar? IIf i'm going to make responsive my website for phones, for instance, my landing page is not displayed full screen, since until I scroll down the address bar is taking space in my screen. How can I handle this? How can I "fix" this little issue? – Andrea Giachetto May 05 '15 at 13:39
  • @AndreaGiachetto you can set the viewport dimensions to be used on mobile devices using the `viewport` meta tag: [Using the viewport meta tag to control layout on mobile browsers](https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag). ``. This will force the display to be exactly that of the devices width and height, regardless of the address bar. – James Donnelly May 05 '15 at 13:41
3

No you don't have to consider that because device-width and device-height are the values for the entire display of the device. The width and height features however describe the width and height of the actual rendering space.

So for example, while your device-height might be equal to 640px, the actual height of the viewport might only be 580px. Some CSS you could consider to just target the viewport at certain sizes

/* Portrait */
@media screen 
  and (min-width: 320px) 
  and (min-height: 580px)  
  and (orientation: portrait) {

}

You are looking for ways to hide the status bar because it is taking up too much real estate. There are a few options for this. The one I have used with success is this little bit of Javascript:

window.addEventListener("load",function() {
    setTimeout(function(){
        window.scrollTo(0, 1);
    }, 0);
});

This waits until the page loads and scrolls one pixel which will cause the address bar to hide, this doesn't permanently remove it.

There is also meta tag that you can use to hide the status bar on iOS devices

<meta name="apple-mobile-web-app-capable" content="yes" />
Mike Hamilton
  • 1,519
  • 16
  • 24
  • Thanks for you answer! I understand that device-width & device-height target the entire display of the device, but how can I controll the space that address bar is "stealing" to my design? Can I adjust this through media queries? – Andrea Giachetto May 05 '15 at 13:41
  • You can't control it through media queries, however there are some meta tags that you can use to target certain mobile browsers to help reduce their size. Mobile safari has a meta tag you can use to make the address bar smaller, I'll update my answer – Mike Hamilton May 05 '15 at 13:42
-5

NO! media query make your page responsive only.

UI-UX
  • 262
  • 1
  • 9