Skip to main content
K
karpiyon
Inspiring
June 28, 2017
Answered

Media query for phone pixel/CSS size

  • June 28, 2017
  • 2 replies
  • 2002 views

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,

This topic has been closed for replies.
Correct answer pziecina

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.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
June 28, 2017

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

Nancy O'Shea— Product User & Community Expert
    pziecina
    pziecinaCorrect answer
    Legend
    June 28, 2017

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices