Media queries for a mobile HTML5 app

Question

I've basically gone mad trying to figure/google it out. iOS device are not an issue since there aren't so many and its easy to set for every single one, but the android and possibly BlackBerry come into the game...

Basically I have 4 sizes (S, M, L, XL) of CSS, but then there comes a phone like "HTC One" that has full HD (1920x1080) and 4.7 inches... how to i count this in? is there like a framework that covers most frames. HJow do i approach this? How do i cover most devices?

Cheers, K

Answer 1

I understand you Karington,

Don't deal with other complicated instant CSS and JS files. You can make your own web site as you want.

Use these media queries:

Media Queries for Web Design

and design your site.

Then check your process step by step on this link:

Test your Responsive Web Design

Here is a web page that I designed in one day with this two link:

Lottery Query for Turkish People

I hope these two link will help you.

Answer 2

Possibly use JavaScript to detect the browser and then use devicePixelRatio to determine the screen resolution?

Or maybe, you could just use media queries to achieve what you want?

• CSS Tricks
• Marc Edwards github from the post device pixel density tests also mentioned by Teo in a comment above.

Answer 3

OK well, I think that create a special css stylesheet for each size of screen doesn't match perfectly the "responsive design" therms. Then you should create first a css for your site based on the largest screen, or start from the littlest (mobile first) your site will be used with. Then you just have to add a media queries block in your css like this : @media all and (max-width: *Size of screen*px) { *Your css here* } to change an element each time he looks weird or uniform.

With this tricks, also use the viewport meta-tag <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> wich will disable scale for the user and fit automatically the window to fit your site perfectly on every screen (even smart phone).

I don't even know if it could really help you, but I think that's it's important to mark that make a specific stylesheet for particulars size is really not the good way, cause there's one million of different screen size.

Then you could also use a css grid, like 960 Grid System or Twitter Bootstrap.

Take a look here for more informations : http://socialdriver.com/2012/06/a-responsive-web-design-tutorial-for-beginners/

Answer 4

In your media query, you can use max-device-width instead of max-width. max-width will target anything that supports media queries, but max-device-width will target based on screen instead of window. "Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window)." *source: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

@media all and (max-device-width:1920px){
 /* this will target any device up to 1920px */
}

Or if you know the resolution, you can combine them:

@media screen and (min-resolution: 2dppx) and (max-device-width:1920px) { ... }

Answer 5

Well, I can say the way I personally handle this is something like this:

<link rel="stylesheet" href="./css/base.css" type="text/css" media="all">
<link rel="stylesheet" href="./css/720_grid.css" type="text/css" media="screen and (min-width: 720px)">
<link rel="stylesheet" href="./css/986_grid.css" type="text/css" media="screen and (min-width: 986px)">
<link rel="stylesheet" href="./css/1236_grid.css" media="screen and (min-width: 1236px)" >

So I basically have three CSS files, and depending on the width of the screen, each of these is automatically loaded. The last one is for anything 1236 or higher.

Is this what you are looking for... or am I missing what you are asking?