Targeting specific device sizes without intertwining

Question

I am trying to target devices respectively, but the min and max width intertwine with each other. Here is my code:

/* iPhone 4 (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {

  /* MOBILE MENU */
  #menuContainer .cart p, #menuContainer .menu p {
    font-size: 12px
  }
  /* Home Slider Text */
  #sliderContainer .slider p {
    font-size: 18px;
  }
  #Footer .top .left p:first-child {
    font-size: 17px;
  }
  #Footer .row p {
    font-size: 12px;
  }
}
/* Galaxy S3 (portrait and landscape) ----------- */
@media screen and (min-width : 360px) and (max-width : 640px) {
   /* MOBILE MENU */
  #menuContainer .cart p, #menuContainer .menu p {
    font-size: 20.4px;
  }
  /* Home Slider Text */
  #sliderContainer .slider p {
    font-size: 29px;
  }
  #Footer .top .left p:first-child {
    font-size: 32px;
  }
  #Footer .row p {
    font-size: 20.4px;
  }
}

So iPhone at 320px looks good, but at 480px it is showing font sizes of the Galaxy media query. I would like each specific media query to target its respective device. Is this possible? Let me know if anything is unclear.

It's MUCH better to use percentages on your containers and em spacing based on 100% (16px) for your media queries. Pixels don't mean pixels anymore, the iPad mini for example is 40% smaller than an actual iPad but it reports a width of the regular size one. Plus retina devices are 2 mega pixels. So using em spacing on media queries delivers the intended result: designed for the viewport. It's better to stack your CSS so that outside the media queries, the shared styles are stored. Then use min-width from small to large for the other sizes. — Christina
– Christina, Commented Dec 19, 2013 at 4:35
If I use "em" for font size, will it auto adjust based on screen resolution. I tried using "vw" but it is not supported well. — Shivam
– Shivam, Commented Dec 19, 2013 at 4:41
You use em spacing for media queries based on 16px on your html, you can use pixels on your body, p, h1, h2... OR use EMS (if you are familiar with how to overcome compounding). — Christina
– Christina, Commented Dec 19, 2013 at 4:43
If you use em media queries and em font-sizing you won't have to tweak the font size so much for each viewport width. — Christina
– Christina, Commented Dec 19, 2013 at 4:47

Community · Accepted Answer · 2017-05-23 11:51:48Z

2

Awesome spot to test numerous devices and see the specific query:
http://cssmediaqueries.com/target/

This is a nice list of media queries that may be of use as well:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

And this article discusses fluid layouts that may help you:
http://www.campaignmonitor.com/guides/mobile/targeting/

This post discusses a similar issue: Media queries - targeting specific devices together

As for targeting specific devices by the type of device, I don't think that is available/possible. It is generally done through screen size.

The best option I believe would be to do a fluid layout rather than hard pixel sizes.

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Dec 19, 2013 at 4:01

Phlume

3,1612 gold badges22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shivam Over a year ago

cssmediaqueries.com/target is useful but they have the wrong vertical width for Galaxy series. It is actually 360px :)

davidcondrey · Accepted Answer · 2013-12-19 04:02:14Z

0

Write your media queries more specifically.

Iphone 4: @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)

Galaxy S4:

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)

The S3 will have a ratio of 2. The S2 has a ratio of 1.5 and smaller screen.

answered Dec 19, 2013 at 4:02

davidcondrey

36.3k18 gold badges119 silver badges138 bronze badges

2 Comments

Phlume Over a year ago

wouldn't this cause different results based on the browser tat is viewing the page on the device? "...Each browser uses different settings, so a query for Galaxy S2 on Chrome doesn't work on Opera or Firefox Mobile. " From this page: link

davidcondrey Over a year ago

WebKit-device-pixel-ratio should be supported by Apple and Google covering iOS and Android. And I'm specifying device width rather than screen width so it should work. But I'm still learning media queries myself so I'll look into it further later.

marc_s · Accepted Answer · 2015-09-29 10:18:36Z

0

Created my own queries with a bit of testing but works great and targets almost perfectly. Hopefully it will be useful to some people.

/* TARGETS DEVICES FROM GALAXY S3+ HORIZONTAL */
@media (max-width: 767px) {
  /* CSS HERE */
}

/* TARGETS DEVICES FROM IPHONE 5S & IPHONE 4 HORIZONTAL */
@media (max-width: 568px) { 
  /* CSS HERE */
}

/* TARGETS DEVICES FROM GALAXY S3 VERTICAL and IPHONE 4S / 5 VERTICAL */
@media (max-width: 360px) {
  /* CSS HERE */
}

edited Sep 29, 2015 at 10:18

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Dec 19, 2013 at 4:30

Shivam

2,2483 gold badges26 silver badges39 bronze badges

Collectives™ on Stack Overflow

Targeting specific device sizes without intertwining

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related