CODEWITHSUNDEEP
css
user1320260
user1320260

Reputation:

Media queries for samsung galaxy note 2

I am trying to set the width of an element based on screen width. My code works perfectly on desktops and most mobile devices except the galaxy note 2. I've tried this query but to no avail

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    // my css here
}

Upvotes: 1

Views: 7362

Answers (2)

Wei Zhang
Wei Zhang

Reputation: 110

The galaxy Note II will switching the innerHeight and Screen.height during the rotation. The innerHeight/Width and Screen.Height/Width are listed below

Portrait  innerHeight/Screen.Height 615/1280
          innerWidth/Screen.Width   360/720
Landscape innerHeight/Screen.Height 335/720
          innerWidth/Screen.Width   640/1280

According to this article http://tripleodeon.com/2011/12/first-understand-your-screen/ the media query min/max-device-height/width is equal to screen.height/width So for Galaxy Note II, my media query is listed below

/*  Galaxy Note2 - Portrait */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-height: 1200px) and (max-device-height: 1300px) and (orientation: portrait) {
    Code here
}

/*  Galaxy Note2 - landscape Due to the Screen Height and Width is changing during orientation changes */
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1270px) and (max-device-width: 1300px) and (orientation: landscape) {
    Code here
}

Upvotes: 1

Matthew R.
Matthew R.

Reputation: 4350

You could target just that phone with a conditional stylesheet. It's kind of like fixing a dent with a sledgehammer but it will work. You can parse the user agent string and add a stylesheet for just that phone model.

Upvotes: 0

Related Questions