Menu
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
622
This may be the reason why your media queries aren't working. That is to say, you may have declared CSS within your HTML document. So if this is the case, simply go through the HTML document and remove the CSS declared inline. Alternatively, you can override the inline CSS with !
Media query examples In this first example, we want the background color to change to blue when the width of the device is 600px or less. In the CSS, we want to add a (max-width: 600px) for the media query which tells the computer to target devices with a screen width of 600px and less.
A media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. Queries involving unknown media types are always false.
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" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
