Media Requests for HTML5 Mobile Application

Question

I basically went crazy trying to understand / google. An iOS device is not a problem, since there are not many of them, and they are easy to install for each of them, but android and, possibly, BlackBerry come into the game ...

Basically, I have 4 sizes (S, M, L, XL) of CSS, but then a phone like “HTC One” appears that has full HD (1920x1080) and 4.7 inches ... as I find it in ? exists as a structure that spans most frames. Can I approach this? How can I cover most devices?

Cheers, K

Answer 1

Well, I can tell how I personally deal with 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 one automatically loads. The latter for something 1236 or higher.

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

Answer 2

In a media request, you can use max-device-width instead of max-width . max-width will target anything that supports media queries, but max-device-width will be adjusted based on the screen instead of the window. "Describes the width of the output device (which means the entire screen or page, and not just the visualization area, such as a 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 3

Well, I think that creating a custom CSS stylesheet for each screen size is not ideal for responsive design tags. Then you must first create css for your site based on the largest screen, or start with the smallest (mobile first) with which your site will be used. Then you just need to add the block of media queries to your css as follows: @media all and (max-width: *Size of screen*px) { *Your css here* } change the element every time it looks strange or uniform.

Using these tricks, also use the viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> meta tag, which will disable the scale for the user and automatically adjust the window. so that it matches your site on every screen (even a smartphone).

I don’t even know if this can really help you, but I think it’s important to note that making a specific style sheet for the size of specific data is actually not very good, invoking one million different screen sizes .

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

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

Answer 4

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

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

• CSS tricks
• Marc Edwards github from post pixel device density tests] also mentioned in Teo in the comments above.

Answer 5

I understand you, Carrington,

Do not work with other complex instant CSS and JS files. You can create your own website as you wish.

Use these multimedia queries:

Web Design Media Inquiries

and design your site.

Then step by step follow these steps:

Test your responsive web design

Here is a web page that I developed in one day with these two links:

Lottery request for Turkish people

I hope these two links help you.