Non-native resolution - can it be detected?

[FranticFish]

I'm very new to responsive so apologies if this is a dumb question / has been answered many times already.

I use @media only screen and (min/max-width:npx) to change layout.

What happens if someone is not in their native resolution?

Let's say:
a) Their device has a native resolution of 1280px
b) I have a breakpoint at 1200px
c) They set their actual resolution at 960px

What will happen?
Will they see the layout intended for people viewing at 1200px and above?
If so, is there a way of detecting the resolution they prefer to use and showing them content as if they had a lower native resolution?

[not2easy]

Interesting question, have you tried viewing it with different resolutions settings on your computer? Using parameters that you control may be the easiest way to determine what happens. The device pixel ratios of different devices might have different results, but I don't know that there are many (any?) adjustments made on mobile resolution.

I looked all over for the answer to a similar curiosity and found by testing that no matter the em size in use according to the css, ems are determined using default for @media settings. To clarify - if you set your font size to "90%" you might think that ems for @media widths would need adjustment with a 14.4 factor, but no, they remain at the browser default of 16px so 1200px = 75em, not 83.33em.

[FranticFish]

Thanks!

I blushed a bit after posting when I realised I could test this perfectly myself by setting break points around my own screen resolution settings. Forgive me, it's been a bit of a roller-coaster ride over three days with a lot of caffeine involved, got me frustrated/happy like when I first started messing around with HTML :)

I've been reading fairly avidly about responsive and I've found how accommodating browsers try to be e.g. if you set a height in pixels then (apparently) higher pixel density devices will multiply it by 1.3x, 1.5x, 2x or 3x.

With your example, are you setting font-size:90% as your 'global' definition from which all else cascades (i.e. in a reset or similar), or accepting 16px and trying to work from that as your base when you set styles i.e <p> <h1> etc? I'm very new to this, but (as long as I understand it right) then trying to f*ck with standard browser stuff seems unwise. Whatever they set, I'd accept, and interfere with further down.

I also wonder if you're letting the viewport stay 'as is' i.e. <meta name="viewport" content="initial-scale=1"> - if not, could that interfere with things?
If (and it's a fairly big if) I understand what I've read, then 'width=device-width' is the biggest bit of bad advice ever.

[not2easy]

<meta name="viewport" content="initial-scale=1"> is the "golden rule" in my book. Other settings may not please viewers who are unable to use their device as they prefer. That initial scale allows the mobile browser to relate your css to the device pixel ratio of the device which in theory means it will look roughly the same regardless of the resolution.

In the example, yes, the font-size: 90% setting was for most of the text on the page, but tests showed me that the 90% did not carry through to breakpoints. Across browsers, 16px = 1em, css can use % sizes to let the browser adjust the fonts, but for breakpoints it uses the 16px default. The use of px for sizing does not adjust for devices which is why the use of % or ems is more reliable.

[FranticFish]

When looking at example responsive style sheets I kept seeing device-orientation breakpoints and wondered why - then realised that 'width=device-width' makes that necessary. Seems like another reason not to use it to me.

Re: the font thing, very interesting, thanks. I also plan to use ems for fonts (and % for nested ones) and work from 16px rather than try to set to something else via a reset. I am currently using px for two things: first for maximum screen widths for breakpoints (then using % for all containers within that); and second for masthead / brand banner height - at least on this first website. Once I understand them a little better, I will probably go back and retrofit ems for everything except breakpoints

Right now I'm just resizing my browser window on desktop to test things but next month I'm investing in suite of iOS and Android devices, as well as getting my desktop set up to run OSX as well as Windows so I can see first hand how things like double pixel density, tap instead of hover, and rotating the viewport work first hand. Fun times ahead!

[not2easy]

Resizing a desktop browser can check for some things, but it is not a very accurate method of testing. Depending on how deeply you want to look into device emulation, Google offers a free tutorial called Udacity. It requires you to connect a device to your computer and use the device OS to do testing. I think that is overkill if you aren't aiming for app development. Their instructions are clear and straightforward. Of course that limits you to the device at hand but the idea is that standards compliant browsers are becoming the norm, even Edge is getting there.

There are various mobile emulators online and a viewer built in to the browser with a developer extension for Safari and Firefox anyway. I know that Chrome used to have a decent emulator, but I'm not sure whether they still do. I try to stick to leveraging browser defaults where it makes sense, just to keep it simple. I check my work on my own devices but I don't have an Android device to check with (yet).

[tangor]

I have a script that tells the mobile guys to turn their phone sideways to see the web site. Best real estate. I need all the pixels and ems I can get. Those apple iphone retina dvga (960px) guys are out of luck.
.
.
.
.
.
.
.
.
.
.
.You know that is a joke, right?

Best display, for responsive (all other things considered) is 100% of viewport and all divs/columns interior in percents which allow slide/drop with a minimum constrained width of 320px IF REQUIRED if you must measure, and in part fail for bit of the web as win and apple use two different metrics in measuring that (px)... last time I looked, which has been awhile.

In any event, percent and ems plus viewport really does give better results these days. I can't recall the last time I actually set a width on a website.

[FranticFish]

Think I've been very wrong to consider pixels for anything, most of all breakpoints.

I've just been looking at iOS resolutions, and iPhone 6 Plus apparently has a resolution (taking into account 3x pixel density and downsampling) of 1080 x 1920 in portrait mode.

That would mean I'd be serving them something meant for a far bigger screen than 5.5 inches if I use pixels in media queries.

[tangor]

It is a jolt, @franticfish, but the day of px has come and gone.

In my experience viewport has been generally good for display purposes, and as long as my page divisions (divs) are interior that it seems to work better than the "old daze" (sic) of table px layouts and all that other arcane stuff.

Love the em. Embrace the percent (div). All is good... at least this iteration of web design. Wait fifteen minutes, it will change again!