CODEWITHSUNDEEP
csstouchmedia-queries
craigpatik
craigpatik

Reputation: 969

Styles based on touch capabilities rather than viewport media queries?

tl;dr: Does it make sense to scope "mobile" CSS under a .touch class (added by Modernizr) rather than with media queries based on viewport size?

I am creating mobile styles for a site designed to be desktop-only (i.e. the page is fixed at ~900px wide, many targets are too small for touch, etc). The site has lots of forms, some tables, and no images/video/charts. I cannot control the HTML structure (except with JS, which I'd like to avoid), and I cannot make meaningful changes to the existing desktop styles.

I've written a new style sheet that overrides those styles where necessary to make it work well on a phone and on a tablet in portrait mode using max-width media queries.

The problem is that when you turn the tablet to landscape mode the screen becomes 1024px wide which is where desktop styles ought to take over. However, a tablet is still a touch device and I feel the "mobile" style is better suited to tablets (larger tap targets, nicer layout of the form fields and labels, off-canvas menu, etc). It seems quite clunky and disorienting for a site to suddenly change just because you rotated the device.

Should I scope the mobile styles under the .touch class added by Modernizr instead of the viewport width? On the surface it doesn't sound like a bad idea, but then again I know that viewport-based media queries are the proper way to write styles so I can't help but feel I will run into trouble down the line.

Upvotes: 1

Views: 186

Answers (2)

David Randall
David Randall

Reputation: 770

You could probably target those devices using a media query along the lines of

@media only screen and and (min-device-width:~whatever~) and (max-device-width:1024px) and (orientation:landscape) {
  styles
}

We should also remember that not all mobile devices are touch enabled, such as some Blackberry phones, so enabling some features/styling based on the .touch class that modernizr adds can also help.

Upvotes: 0

wullaski
wullaski

Reputation: 89

You could use Modernizr to pick between two stylesheets to load.

In a file called small-enough.css or something, import your mobile styles based on a media query for tablet portrait size and down. Documentation found here. Just have this one line in it.

    @import path/your-mobile-styles.css @media (max-width: [tablet portrait width]);

Then with modernizr if it's a touch device just load the mobile styles. If it is not touch load the file that uses the media query to decide to load the mobile styles.

    Modernizr.load({
      test: Modernizr.touch,
      yep : 'your-mobile-styles.css',
      nope: 'small-enough.css'
    });

Upvotes: 1

Related Questions