CODEWITHSUNDEEP
htmlcssmedia-queries
Joshua
Joshua

Reputation: 946

Nexus 5 Media Queries?

I am trying to write a mobile site for college using CSS media queries, however when I try to target the Nexus 5 using:

@media only screen and (min-width : 20em)

(Remember 20em = 320px) it doesn't work and instead fills the page roughly 90% on the X and Y axis.

The Viewport I am using is so:

<meta content="width=device-width, user-scalable=no" name="viewport">

I was thinking of writing a media query based on pixel ratio, but failed to find any answers via Google as to the ratio of the N5.

Any help would be greatly appreciated.

Thanks

Upvotes: 7

Views: 20880

Answers (3)

Benny Code
Benny Code

Reputation: 54832

With this media query you can catch the Google Nexus 5:

@media only screen 
and (min-width: 360px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3.0) {
  * {
    background-color: black;
  }
}

For safe handling of the specified width, the following should be placed in the <head> section of the HTML document:

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

Upvotes: 4

TJSimons
TJSimons

Reputation: 131

The Nexus 5 device width is actually 360, or 22.5em based on 16px.

What I normally do is after 767px (1px less than most tablets) I switch to percent based, single column layouts to accommodate all the one off devices. I'll then set my browser window, and/or test on the device if I have it, at each popular viewport and fix any one off issues.

This approach is geared more for my work environment, which is very production oriented; we don't get a lot of time per site.

Upvotes: 4

user934902
user934902

Reputation: 1204

Try this viewport, setting the initial scale will prevent zooming. You can set your media query to around 767px (this will cover pretty much all mobile phones)... 768 gets you into tablet portrait views. With some crafty CSS (using percentages for your layout) your site should function great across all phones

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Upvotes: 9

Related Questions