[SOLVED] Screen resolution: Nexus5 vs Galaxy S.. vs LG G.. etc

[reedrichards]

Hi,

According following table: http://mydevice.io/devices/

Nexus 5, Galaxy S…, LG G… etc. both share the same css size 360x640

Buuuut, for the same size, Nexus 5 include a bottom bar (see screenshot) where the others don’t.

I had wrote a mixin, but of course, since they share the same size, that doesn’t work:

@mixin nexus5() {
  @media (min-width: 360px) and (max-width: 360px) {
    @content;
  }

}

So, anyone has an idea how I could distinguish the Nexus 5 from the other phone? Thru css or whatever, I’m open to any suggestions.

Or is that a “mistake” from the google chrome emulator (I don’t own a real Nexus 5) and the bar in reality doesn’t count in the 640px height?

Thx in advance

[reedrichards]

I solved the different screen resolutions like following:

@mixin nexus5() {
  @media (min-width: 360px) and (max-width: 360px) and (min-height: 567px) and (max-height: 639px) {
    @content;
  }
}

@mixin nexus5X() {
  @media (min-width: 412px) and (max-width: 412px) and (min-height: 660px) and (max-height: 731px) {
    @content;
  }
}

@mixin nexus6() {
    @media (min-width: 412px) and (max-width: 412px) and (min-height: 732px) and (max-height: 732px) {
    @content;
    }
}

@mixin nexus7() {
  @media (min-width: 600px) and (max-width: 600px) {
@content;
  }
}

@mixin nexus10() {
  @media (min-width: 800px) and (max-width: 800px) {
@content;
  }
}

@mixin galaxyS5() {
    @media (min-width: 360px) and (max-width: 360px) and (min-height: 640px) and (max-height: 640px) {
    @content;
    }
}