Responsiveness based on something more than size?

[Phlawm53]

------
For Flare 11 online outputs, although this is more of a general CSS strategies question.

Q: Is there a more intelligent way to configure the responsiveness of an HTML5 Target that responds to something more than mere size in pixels (PX)?

The problem I'm trying to solve is that of preventing an HTML5 Target from transitioning into tablet / mobile mode when I'm viewing it in a laptop's browser at a small size. I simply want the content to resize, NOT transition into a mobile format.

So far I've only modified the size threshold of the transition by editing the @media screen and (max-width: 40em) bits of the project CSS file. But this seems to me to be an unintelligent approach. I'm therefore wondering if there's some way to use a combination of size and device information to more intelligently control the transition into or out of a given display mode?

■ I've done some amount of research but am not clear whether CSS alone is the answer, or whether JavaScript or something else beyond CSS alone is the best way to attack this problem.

■ I'm also curious whether anyone has tried to address this problem, and if so how successful where you?

■ Does it make any sense to somehow get this behavior out of the skin and somehow into the project's CSS instead? (The division between Skin and project CSS is becoming increasingly annoying to me: Why do I need to go to two separate resources to control display behavior? This made sense back in the Web Help days but seems to be a legacy approach.)

Cheers & thanks for your help,
Riley
SFO

[kwag_myers]

I remember (back in the day) having to use a javascript to check the browser's resolution and implement the corresponding CSS. I've never tried this, but there seem to be a number of ways to check for touch screen using js. I wonder if you could use that to set which CSS is used?

[NorthEast]

Q: Is there a more intelligent way to configure the responsiveness of an HTML5 Target that responds to something more than mere size in pixels (PX)?

This basically is the 'responsive' approach - i.e. use a media query to determine the device/screen dimensions, and use appropriate CSS for that display.

A different approach is 'adaptive', which is is to have multiple separate versions, rather than one version that 'responds' to different devices.

The problem I'm trying to solve is that of preventing an HTML5 Target from transitioning into tablet / mobile mode when I'm viewing it in a laptop's browser at a small size. I simply want the content to resize, NOT transition into a mobile format.

If you're talking about the skin transition, then try the Use device width media queries option (on the target Skin tab).

Setting this causes the media queries use max-device-width instead of max-width, so instead of responding to visible width, they respond to the width reported by the device itself. That means it'll be fixed for that device, so when you resize the browser on your PC it will not change.

So far I've only modified the size threshold of the transition by editing the @media screen and (max-width: 40em) bits of the project CSS file. But this seems to me to be an unintelligent approach.

Here, are you talking about a media query in your topic stylesheet?

If you're adding media queries to your stylesheet, then bear in mind the responsive breakpoints (set in the target skin tab) can only be set in pixels (px). Therefore, if you want your breakpoints to synchronise with the skin, then it may be better to match those (pixel) values that you set in the target. Likewise, if you use width or device-width breakpoints for the skin (mentioned above), do the same for your stylesheet.

I rarely need to use media queries in my own stylesheets, as I find that I can handle the layout using the Foundation grid (which is automatically included if you use top nav).