How to distinguish between mobile and screen with CSS media query?

395
August 18, 2017, at 01:45 AM

I read that most media queries use viewport width to determine whether your are on a phone, tablet or PC. I am building an image grid with 1000s of small thumbs in an endless grid. Each thumb is 125px and on my laptop (MacBook 13") I can easily fit 9-10 thumbs in one row - which gives a fine user experience. If I take the same code to a nexus 5, which has 1080px across I get 6-7 thumbs, which is a bad user experience. the nexus is 6-7 cm across and the MacBook is 25'ish cm - big difference.

My approach would be to detect whether the device is a mobile or pc and the scale the thumbs - big ones for mobile (say 250px) and small for pc (125px). But how do I detect the device. If I use width I basically have to go with a min-width of 1100px to catch most new phones. I could also go with resolution, mobile phones generally have higher DPIs than PC/laptops.

Or do I have this completely wrong?

I am writing the app in React.

Answer 1

It's not that your Nexus 5 renders webpages at 1080px wide, it's that your site is not performing responsively to fit your phone screen, so it's rendering as a zoomed-out desktop site.

You need to add this viewport meta tag to your site's <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Once that's in, your Nexus 5 should render webpages at something closer to 400px wide, and you can base your media queries around that.

Here's how you'd make your thumbnails 125px wide for screens under 480px wide:

@media (max-width: 480px) {
  img {
    width: 125px;
  }
}
Rent Charter Buses Company
READ ALSO
How to chose image dimensions on a background:cover div?

How to chose image dimensions on a background:cover div?

I have a slider on my page with the property background cover applied so it fits the whole thingThe slider also has a 50vh fixed height

256
Description box show out after hover a personal picture [duplicate]

Description box show out after hover a personal picture [duplicate]

This question already has an answer here:

203
Right way to provide a component size?

Right way to provide a component size?

Lets say I have a child-component that I want to take 70% of parent-component's width

291
Career Advice Requested From Industry Veterans - Where do I Fit in With a Marketing &amp; Programming Background? [on hold]

Career Advice Requested From Industry Veterans - Where do I Fit in With a Marketing & Programming Background? [on hold]

tl;dr I would like to know if I can integrate my marketing background with a programming career based on what I'm learning at coding bootcamp

192