41

I've found a lot of threads here talking about CSS and mobile screens.

After searching, I couldn't find a solution for some devices. For example: Motorola Moto G4 Plus uses FULL HD width(1080px), only bootstraps detect the xs-view configuration.

Styling and trying and trying I couldn't get some styles set up.

So, how can I make the same procedure as Bootstrap to set up my styles and in the general procedure for all devices?

Please, only CSS or as much JS(if it possible, don't), the same as bootstrap.

I've tried the @media screen and @media all queries. Doesn't work.

Thanks for reading.

Abolfazl Panbehkar
  • 700
  • 2
  • 7
  • 21
Max
  • 413
  • 1
  • 4
  • 4

5 Answers5

63

All touch screen and mobile devices (including tablets, smartphones) can be detected with css with the following @media rule.

@media only screen and (hover: none) and (pointer: coarse){

/* Regular CSS rules here*/

}
Effie13
  • 631
  • 1
  • 5
  • 2
  • 1
    Speeking of October 20 I don't know if I can trust in this rule or not. I'll give it a try. – ed1nh0 Oct 16 '20 at 12:22
  • 3
    Works, it works even with just `(hover: none)` which I have used before, but I wanted to optimize it to perfection, thank you for this. The `only` keyword prevents older browsers that do not support `media` queries with media features from applying the given styles. It has [no effect](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) on modern browsers. – haZh Oct 24 '20 at 10:09
  • 2
    @haZh's answer works also for me. That should be the top answer. – adem.sh Apr 25 '21 at 12:35
  • it still works in 2022, hovering on mobile devices has not been invented yet. –  Jul 28 '22 at 17:28
  • Seems to be working on 2023 :P – Leprosy Feb 14 '23 at 19:40
23

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

John Michael Manlupig
  • 139
  • 1
  • 8
VMeijer
  • 415
  • 1
  • 5
  • 15
  • Thanks. i solved this using this kind of queries: @media screen and (max-width:767px), screen and (max-device-width:767px) – Max Feb 03 '17 at 13:57
  • 6
    Honestly, I have doubts about this answer. It would certainly work with some devices but now that there are many QHD and 4K mobile, they wouldn't be selected by this. I don't know what the better solution is either. – Itai Sep 21 '19 at 16:12
  • 1
    Now deprecated: https://drafts.csswg.org/mediaqueries/#mf-deprecated – Luis A. Florit Oct 02 '20 at 16:35
3

CSS media query works, but what about ipads with big screens? You can do the following with javascript:

if (window.orientation !== undefined) {
  document.body.classList.add("mobile");
}
tzador
  • 2,535
  • 4
  • 31
  • 37
  • 5
    According to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation) it's deprecated and is no longer recommended – metalinspired Oct 17 '19 at 10:14
2

I found this code and works in all classic android devices:

  /* For Mobile Portrait View */
@media screen
  and (max-device-width: 480px)
  and (orientation: portrait){
    html{
     background-color: red;
     width: 80%;
    }
}
 
/* For Mobile Landscape View */
@media screen
  and (max-device-width: 640px)
  and (orientation: landscape){
   html{
      background-color: red;
     
    }
}
 
/* For Mobile Phones Portrait or Landscape View */
@media screen
  and (max-device-width: 640px){
    html{
      background-color: red;
     
    }
}

Source: https://www.geeksforgeeks.org/css3-media-query-for-all-devices/

FreddicMatters
  • 175
  • 12
1

For IOS (IPhone and IPAD) - and Mozilla on Android:

@media only screen and (hover: none) and (pointer: coarse){
/* Regular CSS rules here*/
}

but for Chromium on Android:

@media only screen and (hover: hover) and (pointer: coarse){
/* Regular CSS rules here*/

}

See Media Query Tester: https://hover-pointer-media-query.glitch.me/

volker
  • 49
  • 5