How does pixel amount relate to screen size?

Community resources General
1

I am really struggling to wrap my head around this. My hamburger menu is supposed to show only on landscape and portrait but when I view the website on my mobile it shows me the tablet version. I held my phone up to the screen and it is smaller than the landscape breakpoint but I googled what is my screen resolution and it came back at 960px wide in landscape. So what’s the deal? Are pixels not an actual measurement? It seems as if they are cramming more pixels into the new phones to make images a higher quality while keeping the screen sizes the same. So how are we supposed to design around pixel size if they are all different? Should we not just be using millimeters to get an actual screen size instead?

2

Hey @charlton305,

basically phones have grown so much that now they have entered into tablet mode when you flip them horizontally. In general if your device is wider than 768px when in horizontal it will open up tablet view irrelevant to wether it’s a phone or a tbalet. Same goes with tablet to desktop relation that anything wider than 992px wide will open the desktop view

3

@charlton305 100% what @marko-ninja said, screen size but also resolution of device screens / pixel density have gotten higher, so a small device might fall into tablet due to very high resolution and measuring it with a ruler would make no difference. What you can do if you want to get pedantic is check the resolution of your test device (Google) and then use custom media queries to set display none for the devices you’d like to hide it on. Just using the default Webflow brekpoints here, but something like:

<style>
/* Desktop (Base) - Show the nav icon */
@media (min-width: 992px) {
  .nav-icon {
    display: block;
  }
}

/* Tablet - Hide the nav icon */
@media (max-width: 991px) and (min-width: 768px) {
  .nav-icon {
    display: none;
  }
}

/* Mobile Landscape - Hide the nav icon */
@media (max-width: 767px) and (min-width: 480px) {
  .nav-icon {
    display: none;
  }
}

/* Mobile Portrait - Hide the nav icon */
@media (max-width: 479px) {
  .nav-icon {
    display: none;
  }
}
</style>
1 Like
4

Thanks for the replies. I did some digging at it turns out a CSS pixel is its own thing. New phones also basically tell the browser to ignore their crazy high pixel density and just treat it as if it was a normal screen (as in the way the webflow breakpoints are set up).