The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Media Query based on Screen size? ( not Resolution )

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #148900
    Shanti Ecommerce

    Hello all,

    I am having some problems in designing media Queries for one of my site.

    I have nice break points model based on pixels but It breaks at small screen HD devices.

    Ex. 7″inch Galaxy Tab 2 have 1024 px wide screen but screen is smaller then monitors with same resolution. So even if I make bigger buttons for 1024 it looks smaller in 7″ screens b/c some tabs have more PPI then normal computer/laptop screens.

    This case become more worst in ipad 3 it have very high resolution in 10″ screen.

    I know I can setup DPI in media queries but I like to make some fixes with Javascript based on DPI or Screen Size.

    Is there anyways to get Screen’s correct DPI or Screen size in inches ?

    Kindly aDvise.


    I’m not sure if I completely understand your problem. I think you’re worried about the physical size of tablet screens vs. the amount of pixels in them?

    iPad’s and Samsung Galaxy’s do indeed have a high DPI screen, but they will handle pixels in your stylesheet in the same way as normal screens, so you don’t have to worry about that.

    If you write media queries that follow the standard syntax, and create your layout using percentages (and the new box model), you shouldn’t have a problem.

    However, if you want to detect the DPI of a screen in JavaScript, you can use window.devicePixelRatio which returns an integer (i.e. on a Retina MacBook Pro & iPhone it returns 2). As for getting the screen’s size in inches, that doesn’t seem to be possible.

    Shanti Ecommerce

    Hey Ed,

    Thanks for your respond.
    Yes I am using percentage based layout only so it fits to most resolutions.

    But I need break out of layout on same pixel resolution on different devices.

    Let me explain in other words with example.

    I need only one column in my layout while it is viewed in 1024px wide Galaxy Tab.

    And I need 2 columns in my layout while it is viewed in 1024px wide computer screen.

    Actually screen size of 1024 wide Tab and computer is different.

    Kindly advise.


    If you want to change the layout specifically based on device as opposed to its pixel per inch value or device width thats beyond css I believe,

    If you want to change the layout based on pixels per inch / retina this may help

    Shanti Ecommerce

    yes I know It can not be handled with CSS only. If it is possible via JS or PHP.

    Here my concern is Physical screen size.


    Eric Gregoire

    From what I gather you are trying to accomplish, you aren’t going to need a screen’s physical size. Maybe you could work something out with calculating the PPI (or DPI) and the number of pixels to get measurements in inches (considering PPI includes the measure “inch”)…

    But, based on what you have explained, you want to differentiate the layouts of a tablet and computer monitor that have the same pixel width. You may want to consider media queries that are based on PPI. A tablet is generally going to have a higher pixel density than a standard computer monitor. There’s some reading to be done ::

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.