What resolutions should I code for?

Question

I need a list of desktop and mobile resolutions that I should code for.

I am making a page with no-scroll and overflow: hidden; So I need to adjust the page for each desktop resolution and mobile resolution, so I just need a list if possible please.

What resolutions are your users using? Generally, your site should look well on all reasonable resolutions. If you structure your CSS correctly then you shouldn't have to add support for a specific resolution — Benjamin Gruenbaum, May 15 '13 at 10:25
There's alot of resolution .. with different pixelrate .. portrait and landscape... — matzone, May 15 '13 at 10:29
It doesn't make any sense to target specific resolutions. Especially on a desktop the browser window can be any size and at any zoom level and on any size screen so there really aren't any standard dimensions. — JJJ, May 15 '13 at 10:30
What Juhana said, design fluid so your site looks good at all resolutions and use media queries to correct the layout when required — michael, May 15 '13 at 10:44
http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/ and http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ — cimmanon, May 15 '13 at 12:23
possible duplicate: http://stackoverflow.com/q/8564752/3597276 — Michael Benjamin, Mar 20 '16 at 15:43

score 2 · Accepted Answer · edited May 23 '17 at 12:31

You can refer CSS Tricks for Media Queries for Standard Devices. This includes portrait and landscape layouts.

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

There are also many online snippets for the same available:

score 0 · Answer 2 · answered May 15 '13 at 10:34

Use responsive CSS by @media query .. like this

@media only screen and (max-width: 320px) {
    .container {width: 100%;}   
    .dropdown {height:35px;}
    .dropdown p {line-height:35px;}
    .header {height:40px; background:url(images/logoplastik.png) no-repeat 10px 90% left center ;   }
}

@media only screen and (min-width: 321px) and (max-width: 480px) {
    .container {width: 100%; }
    .dropdown {height:35px;}
    .dropdown p {line-height:35px;}
    .header {height:40px; padding-left:10px;}
}

What resolutions should I code for?

2 Answers2