Media Query to Target ONLY Mobile

Question

I want to make a media query to target just my phone. What breakpoint(s) would I use?

For instance, my body max-width is 800px wide with 2px margins. When the window is less than 800px (mobile?) i want the margins on it to be 0px (this works on my browser). Turns out that my phones screen is hi-res and therefore the width of the display never goes below 800px!

Is this because of pixel ratios?

What do I do?

Your answer may be in this question: http://stackoverflow.com/questions/12469875/how-to-code-css-media-queries-targeting-all-mobile-devices-and-tablets — Hynes, Feb 10 '16 at 02:44

sheriffderek · Answer 1 · 2016-02-10T03:15:19.027

The meta-view-port tag changes how websites are displayed on your phone, or other small screens that may want to 'adjust' a website for you.

Some screens, for instance - an iphone 5 - with no meta-view-port tag, will size the website to fit your screen / but like a little version of your website zoomed out. https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

A combination of a view-port tag, and a media-query in your styles would allow you to change your style rules depending on the screen-size. It's kinda best just to make the breaks where things get ugly and not based on the screen sizes of "Today" that will change next month.

I would suggest building from the smallest screen first and moving up as you go with styles like this:

html {
  height: 100%;
  background: blue;
}

@media (min-width: 400px) {
    html {
      background: red;
    }
}

@media (min-width: 850px) {
    html {
      background: green;
    }
}

etc.

https://jsfiddle.net/5qhmrym5/

If you already have your site built.. and you really want to target the smaller screens, you can use max-width instead of min-width - but I've found that it takes more time and energy to override styles on the way down - then it does on the way up because styles get more complex for larger screens.

@media (max-width: 850px) {
  /* styles */
}

score 0 · Answer 2 · answered Feb 10 '16 at 03:03

If what you want to change is margin value when viewed on mobile you should design your display for use on any screen above the mobile size, 800px wide for you, then create a media query, similar to the ones in the link commented by @Hynes, which changes just margins to 0px.

You are correct in assuming your device is 800px wide due to ratios, but it also has to do with resolution, which are similar topics here. If you imagine a sports jumbo screen, a pixel is nearly an led in size, vs a 1080px display laptop, where the pixels are nearly unobservable. Ratios and resolutions are the reasons displays are tricky to make, and why values such as em's and percentages have come to be, to bypass the differences in display. This is also a large reason of why media queries are so useful

score 0 · Answer 3 · answered Feb 10 '16 at 03:24

html {
box-sizing: border-box;}
*,*:before,*:after {box-sizing: inherit;}

Try using box-sizing: border-box on your css and also percentages, this is the way I like it, but surely you will find plenty of information about it, just google it.

score 0 · Accepted Answer · edited May 23 '17 at 10:34

Found the solution: https://stackoverflow.com/a/18500871/5906166

You need to include this in your header:

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

Explanation:

Fortunately, you can specify a viewport meta tag in the <head> section of your document in order to control the width and scaling of the browser's viewport. If this tag has a content value of width=device-width, the screen's width will match the device independent pixels and will ensure that all the different devices should scale and behave consistently.

Media Query to Target ONLY Mobile

4 Answers4