How to Detect Only with CSS Mobile Screens

How to detect ONLY with CSS mobile screens

The @media rule is used to define different style rules for different media types/devices.

If it doesnt work, check your code. you might have made a typo somewhere.

Example:

@media only screen and (max-device-width: 640px) {
    /* Styles */
}
    
@media only screen and (max-device-width: 768px) {
    /* Styles */
}

Earlier post:
How to code CSS media queries targeting ALL mobile devices and tablets?

W3schools: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Detect if a browser in a mobile device (iOS/Android phone/tablet) is used

Update (June 2016): I now try to support touch and mouse input on every resolution, since the device landscape is slowly blurring the lines between what things are and aren't touch devices. iPad Pros are touch-only with the resolution of a 13" laptop. Windows laptops now frequently come with touch screens.

Other similar SO answers (see other answer on this question) might have different ways to try to figure out what sort of device the user is using, but none of them are fool-proof. I encourage you to check those answers out if you absolutely need to try to determine the device.

iPhones, for one, ignore the handheld query (Source). And I wouldn't be surprised if other smartphones do, too, for similar reasons.

The current best way that I use to detect a mobile device is to know its width and use the corresponding media query to catch it. That link there lists some popular ones. A quick Google search would yield you any others you might need, I'm sure.

For more iPhone-specific ones (such as Retina display), check out that first link I posted.

How to target only landscape mobile devices without affecting desktop via CSS?

You can mix CSS Media Queries for orientation to detect landscape mode and hover + pointer to detect a touch device.

@media (orientation: landscape) and (hover: none) and (pointer: coarse) {
/* your CSS to target only landscape mobile users */
}

For a reference to detect a touch device with only CSS here's a good article on medium.

The best solution is to use JavaScript to detect the device and add a class to the <body> or the <html> in order to add your CSS.
You can have a look at current-device, you just include the script, that then updates the <html> section with the appropriate classes based on the device's characteristics.

Hope this helps.

Best way to catch mobile css media query

The media query to identify a mobile user uses the device-width, but which is the best value to set the breakpoint?

There are a few theories out there on how to handle this. Some people go and find the most popular device widths and set their breakpoints at those places. This is great if you know for certain what most users on your site use. However, the downsides are that you have to mold your design to those widths and you have to continually update your code as new devices come out.

So your breakpoints would be something like:

// iPhone 6
@media only screen and (min-device-width : 375px) {
    // styles go here
}
// iPhone 6+
@media only screen and (min-device-width : 414px) {
    // styles go here
}

The other theory is to make it fully scalable at any size regardless of what the device is. The upside to this is that you can insure that your design looks great on all devices. The downside is that it makes your code a bit more bloated. the breakpoints here would be wherever you need them. I personally use this method but start with break points at 1200 and go to 1100, 1000, as needed. If I'm going mobile first I'll start with 320, 350, 400, 500, etc...

When using my android smartphone with Google chrome, the width of the
page is about 400px, even thought the real resolution is full hd,
1080px width. Does this depends form the browser, or what?

The device width has many factors to it. But the device width is basically the number of pixels across that the browser is displaying. There's a little more to it than this, but your best bet is to Google device widths.

I saw that someone uses the em mesure to set the breakpoint, is this
more accurate?

Nope. It's just a way of subdividing from a parent element. Until you have more time to research this, stick with pixels.

Finally, after having read lots of different informations, can you
please tell me which is the moste effective way, the best media query
to catch if the client is mobile or not? Thank you.

The best way to do this is to determine your break points. You cannot target mobile browsers specifically using CSS. You can only target the attributes of those browsers (width, height, orientation) so you can know that iPhone6's are 375 pixels across in portrait. So you can target them using that width. As Allan said, you can target devices with Javascript or server side libraries and add classes that way. But IMO it's better to stick with device widths and save those for situations where you're absolutely stuck.

Responsive css styles on mobile devices ONLY

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.

How to use CSS to display only three items on a mobile device

Here you go.

.list {
  width: 300px;
}

.list .item {
  width: 100%;
  text-align: center;
  padding: 16px;
  background-color: #fed71a;
  list-style: none;
  margin-bottom: 1px;
}

@media (max-width: 414px) {
  .item:nth-child(4),
  .item:nth-child(5),
  .item:nth-child(6) {
    display: none;
  }
}

<ul class="list">
  <li class="item">about1</li>
  <li class="item">about1</li>
  <li class="item">about1</li>
  <li class="item">about1</li>
  <li class="item">about1</li>
  <li class="item">about1</li>
</ul>

How to detect the device orientation using CSS media queries?

CSS to detect screen orientation:

 @media screen and (orientation:portrait) { … }
 @media screen and (orientation:landscape) { … }

The CSS definition of a media query is at http://www.w3.org/TR/css3-mediaqueries/#orientation

Media Queries: How to target desktop, tablet, and mobile?

IMO these are the best breakpoints:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Edit: Refined to work better with 960 grids:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

In practice, many designers convert pixels to ems, largely because ems afford better zooming. At standard zoom 1em === 16px, multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

In response to the comment, min-width is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens.

Regardless of whether you prefer min-, max-, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.

How to Detect Only with CSS Mobile Screens