All geek questions in one place

Nexus 5 Media Queries?

I'm trying to write a mobile site for college using CSS queries, but when I try to configure Nexus 5 using:

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

(Remember 20em = 320px), it doesn’t work and instead fills the page about 90% along the X and Y axis.

I am using Viewport:

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

I was thinking of writing a media query based on the pixel ratio, but could not find answers through Google regarding the N5 ratio.

Any help would be greatly appreciated.

thanks

+6
source share
3 answers

Try this viewport, setting the initial scale will prevent scaling. You can set the media query to approximately 767px (this will cover almost all mobile phones) ... 768 allows you to look at a tablet computer. With some tricky CSS (using percentages for your layout), your site should function perfectly on all phones

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

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

What I usually do is after 767px (1px less than most tablets). I switch to percent-based single-processor layouts to accommodate all one-way devices. Then I will install my browser window and / or test on the device, if I have one, in each popular viewport and fix any problems.

This approach is more focused on my work environment, which is very production oriented; we don’t get much time on the site.

+4
source

With this multimedia query, you can catch Google Nexus 5 :

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

To safely handle 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" />
+2
source

Source: https://habr.com/ru/post/957450/

More articles:


All Articles