CODEWITHSUNDEEP
cssresponsive-designmedia-queries
jaspn
jaspn

Reputation: 423

Responsive css styles on mobile devices ONLY

I'm trying to make my responsive CSS styles work only on tablets and smartphones. Basically I have a style for desktop, a style for mobile: portrait and a style for mobile: landscape. I don't want the mobile styles interfering with the desktop presentation at all. I have played around with countless media queries, but the result either the mobile styles are getting displayed on the desktop, or the mobile styles are displaying only on mobile devices but with only one set of rules (non-responsive). Is there a way I can keep the two completely separate?

My code I have right now goes like this:

/* regular desktop styles */

@media only screen 
and (max-device-width: 600px)
 { ... }

/* mobile only styles when the device is 0-600px in maximum width */

@media only screen 
and (max-device-width: 1000px)
{ ... }

/* mobile only styles when the device is up to 1000px in maximum width */

Upvotes: 42

Views: 234990

Answers (7)

Grzegorz Boroń
Grzegorz Boroń

Reputation: 41

You can write function in JS that check if user is on mobile version add then add class called 'mobile' to body in html: Detecting a mobile browser

<div class="example exampleOnMobile">Hello</div>

<style>
.example{
font-size: 11px;
}

.mobile .exampleOnMobile{
font-size:2em;
}
</style>

Upvotes: 0

Mohd Sala
Mohd Sala

Reputation: 111

You can use this to prevent it from showing on specified devices:

@media (max-width: 700px) {
  .hidden-mobile {
  display: none;
}
}

in the code above, the item is not shown if the device width is smaller than 700 pixels.

Upvotes: 1

Shaedo
Shaedo

Reputation: 453

An alternative that will work in rare cases (sites optomised to run clean server side code) is to

  1. Detect if a mobile device (both PHP and python have been able to do this reliably for near a decade)
  2. Add your mobile.css after the others (so it over-rides this).

*w3schools recommends doing it the other way around; that is designing for mobile and then appending a .css file to adjust if it's a desktop site. As I tend to dev on desktop, and there's only maybe 15 .css attributes I have to over-ride (most of my sites are dynamic) I do desktop with mobile over-ride.

A php example (I use time() to prevent .css caching) (you can find how to detect mobiles in PHP here)

<link rel="stylesheet" type="text/css" href="/css/common.css?t=<?php echo time(); ?>">
<?php
    require_once $_SERVER['DOCUMENT_ROOT'] . '/util/Mobile_Detect.php'; // Mobile_Detect class
    $detect = new Mobile_Detect;
    if($detect->isMobile()) // if the client is a mobile
    {echo '<link rel="stylesheet" type="text/css" href="/css/mobile.css?t='.time().'">'; // add an extra .css to override for mobiles
}
?>

Upvotes: 0

Ran
Ran

Reputation: 409

Why not use a media query range.

I'm currently working on a responsive layout for my employer and the ranges I'm using are as follows:

You have your main desktop styles in the body of the CSS file (1024px and above) and then for specific screen sizes I'm using:

@media all and (min-width:960px) and (max-width: 1024px) {
  /* put your css styles in here */
}

@media all and (min-width:801px) and (max-width: 959px) {
  /* put your css styles in here */
}

@media all and (min-width:769px) and (max-width: 800px) {
  /* put your css styles in here */
}

@media all and (min-width:569px) and (max-width: 768px) {
  /* put your css styles in here */
}

@media all and (min-width:481px) and (max-width: 568px) {
  /* put your css styles in here */
}

@media all and (min-width:321px) and (max-width: 480px) {
  /* put your css styles in here */
}

@media all and (min-width:0px) and (max-width: 320px) {
  /* put your css styles in here */
}

This will cover pretty much all devices being used - I would concentrate on getting the styling correct for the sizes at the end of the range (i.e. 320, 480, 568, 768, 800, 1024) as for all the others they will just be responsive to the size available.

Also, don't use px anywhere - use em's or %.

Upvotes: 40

Alan Bellows
Alan Bellows

Reputation: 1831

I had to solve a similar problem--I wanted certain styles to only apply to mobile devices in landscape mode. Essentially the fonts and line spacing looked fine in every other context, so I just needed the one exception for mobile landscape. This media query worked perfectly:

@media all and (max-width: 600px) and (orientation:landscape) 
{
    /* styles here */
}

Upvotes: 11

Raptor
Raptor

Reputation: 54258

Yes, this can be done via javascript feature detection ( or browser detection , e.g. Modernizr ) . Then, use yepnope.js to load required resources ( JS and/or CSS )

Upvotes: 4

justinavery
justinavery

Reputation: 2596

What's you've got there should be fine to work, but there is no actual "Is Mobile/Tablet" media query so you're always going to be stuck.

There are media queries for common breakpoints , but with the ever changing range of devices they're not guaranteed to work moving forwards.

The idea is that your site maintains the same brand across all sizes, so you should want the styles to cascade across the breakpoints and only update the widths and positioning to best suit that viewport.

To further the answer above, using Modernizr with a no-touch test will allow you to target touch devices which are most likely tablets and smart phones, however with the new releases of touch based screens that is not as good an option as it once was.

Upvotes: 13

Related Questions