Search code examples
htmlcsspixel

CSS queries on centimetres or DPI not pixels

I am creating a webpage that is size-specific rather than pixel-specific (i.e. width in centimetres or inches not pixels)

When testing on different mobile phones I've noticed that sometimes the resolution of the device can be extremely high making the objects on the screen very small compared at what I want the user to view them at.

I'm using queries such as this:

@media screen and (min-width: 0px) and (max-width: 400px){
    /*2 rows*/
    .a1x1, .a1x2{
        width:50%;
    }
    .a3x3, .a3x2{
        width:100%;
    }
    .a2x3, .a2x1, .a2x2{
        width:100%
    }
}
...etc

I know that a list of queries I can use are here at w3schools but I'm not sure what one I would use or how to implement it.

Any help is appreciated! (Please put examples if you can :D)

EDIT:

Sorry for not being completely specific with the question, let me provide a complete description of what I'm trying to achieve.

I have a page that will display media (mostly images) within a grid-based page. When the page is desktop size it will display 5 columns wide. When it is tablet size I would like to display 4 columns. Depending on the size of the mobile device (small/phone) I would like the media to be displayed in 2 or 3 columns. The problem is: on devices such as the Samsung galaxy S IV that have very large resolutions/PPI: they display all 5 columns making the media seem small - removing the full screen effect I'm trying to achieve.

So question is this:

How would I detect small device screens and appropriate this into my css coding?

So far this blog post has been the most helpful.

Solution

  • So I finally had time to look over the links posted as answers. (yay!) It seems that if the device has the resolution to display the entire website it will. I fixed it by adding this little beauty:

    <meta name="viewport" content="width=device-width, initial-scale=1">

    This forces the device to display 1 for 1 without any zoom. Though I believe this may act differently or not be supported on other mobile devices.