0

I have a problem with the css. I want one media query for all smartphones and one for all tablets, and everything bigger than that should be like the desktop version.

https://viid.su/emulate/

I had several versions of media queries but they didnt work for all smartphones just for several ones.

If somebody could help me :( Please write a solution !

Leeroy Jenkins
  • 21
  • 5
  • You mean like loading different css files for various devices (`media query`)? Wouldn't conditional styling be better? – Adam K. Mar 01 '17 at 14:17
  • no just one media query for all smartphones so it looks on all smartphones the same – Leeroy Jenkins Mar 01 '17 at 14:19
  • Well "The same" - If you want it to look the same (no matter the scale), then you should consider setting maybe a static viewport width meta. - On large phones it would be large and on small phones tiny. - But hey, it'd look the same and proportions as well. (I mean, maybe you really want to go for that - i have no idea) – Adam K. Mar 01 '17 at 14:24

2 Answers2

0

Try those:

@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 */ }

You might also want to check queries for different devices here: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

And here is the similar question where you might find more answers: Media Queries: How to target desktop, tablet and mobile?

Community
  • 1
  • 1
Plenarto
  • 639
  • 3
  • 16
0

Try use

@media screen and (max-width: 799px) {

}

and 

<meta name="viewport" content="width=device-width, initial-scale=1">
grinmax
  • 1,835
  • 1
  • 10
  • 13