CODEWITHSUNDEEP
htmlcssmedia-queriesscreen-resolution
bbeckford
bbeckford

Reputation: 4477

CSS Media Query to target 1080 phones?

I'm looking for the correct CSS media query to target all phones (not tablets and larger) including 1080 phones such as the Sony Xperia Z.

Right now I'm using:

<link href='style/mobile.css' rel='stylesheet' type='text/css' media='screen and (max-device-width: 767px)' />

That works for most devices, but in the Android Firefox Browser (not Chrome though strangely) the Xperia Z just gets the desktop site only.

I've tried searching but it seems no one is talking about these new very high-res phones, is there a new standard I should be adhering to?

Upvotes: 1

Views: 2524

Answers (3)

Walle Cyril
Walle Cyril

Reputation: 3247

Use max-width instead of max-device-width to target CSS pixels.

Do not forget viewport meta. Small devices with lots of pixel will still have a low CSS pixel count so it will just work.

Upvotes: 2

Jason Lydon
Jason Lydon

Reputation: 7190

You can combine the width with resolution in your media query.

@media screen and (max-device-width: 767px) and (min-resolution: 300dpi) { … }

Upvotes: 1

Jonathan
Jonathan

Reputation: 1367

I don't think you'll find what you need in media queries. Phones and tablets have a big crossover in resolutions.

Here are the media features you can query according to the w3c...

http://www.w3.org/TR/css3-mediaqueries/#media1

... none seem to be what you're looking for.

Unfortunately I don't know if a great way to deal with this, even the user-agent is of little help.

Upvotes: 0

Related Questions