Recommended sizes for Media Queries, to cover tablets phones laptops and desktops [closed]

开发者_StackOverflow中文版 As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. Closed 10 years ago.

What are the best Media Query sizes to use to be sure you've targeted tablets, phones, laptops and desktops as best you can?

For example: The iPhone and Droid have a screen size of 320X480, therefore it would be good to make sure the design looks good at those sizes, since a lot of phones out there are this size. What other sizes would it be good to target? I'm not looking JUST for iphone/ipad sizes, but in general. Especially since there's more Android devices out there now than iOS devices, and Android devices tend to be of so many different sizes.

@media screen and (max-width: 480px) { /* would target landscape for the droid, iphone 3, etc. */ }

@media screen and (max-width: 320px) { /* would target portrait for the droid, iphone 3, etc. */ }

---

Here is a great link to screen sizes.

Personally, since the iPad is by FAR the most popular tablet device, design the medium screen size (1024x768) to that specification (iPad 2 size) - any larger than that and you're running in to desktop size.

For Smart Phone size I would go with 960x640, although that will probably increase for iphone and android within the next year if not sooner.

---

you can look at mine, http://dev.bowdenweb.com/a/css/media-queries-boilerplate.css but i took most of them from hard boiled media queries, http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries