Media query for phone pixel/CSS size

[karpiyon]

Hi,

What is the best practice to set media queries for real phone size.

I am creating my first site, using bootstrap, and I moved the media query ruler down to 540px which is my phones screen size (960 X 540px).

When i tested on the actual phone it appeared as if the resolution is lower that 540px - more like 360px.

This site : https://mydevice.io/devices/#sortSmartphones  offers some info about it.

So my question is, how to create a media query, which will handle the "real" pixel size and how can I know this size?

Should I create media queried for max-width 540px? How does DW and bootstrap intends to handle portrait orientation assuming the CSS size is smaller than 768px when i use the default break points?

I used the default DW break points 768-992-1200 and now I'm afraid these are too large for xs devices.

Thank you,

[pziecina · Accepted solution]

Generally one creates a new media-queries when a layout starts to break up, as the range of viewport and resolutions are now so numerous that specific settings wouls be impossible to cater for. You may test and find no problem on a Samsung smartphone, but the entire layout may break on an iPhone.

You will also find that most devices now, will require you to produce more than just one image or video and use javascript or the srcset element in order for those assets to display at the quality required. It is also important to remember that hi-dpi desktop screens are now becoming more popular, so quality is no longer just a mobile device necessity.

As for creating layouts for the 'real' pixel size, you can use the css resolution property in the media-query, but if you are using Bootstrap remember to create any custom css in your own css file and not the Bootstrap file.

[Nancy OShea]

I use the default Bootstrap media query breakpoints because they work well across the most popular mobile & tablet devices.

/* Extra Small Devices, Phones */
   @media only screen and (min-width : 480px) {

   }

   /* Small Devices, Tablets */
   @media only screen and (min-width : 768px) {

   }

   /* Medium Devices, Desktops */
   @media only screen and (min-width : 992px) {

   }

   /* Large Devices, Wide Screens */
   @media only screen and (min-width : 1200px) {

   }


If I absolutely must make changes, I try to do it in the LESS/SASS variable.  Then compile that to my main CSS file.

LESS: MediaQueries based on bootstrap 3 · GitHub