Chrome Responsive show different as Firefox

sorry for my English…

I do try to write the Media Query for Samsung SM-J810F Galaxy J8 1480 x 720 .

I write on Media Query;

@media only screen and (device-width: 30.8125em) 
               and (device-height: 15em)
               and (-webkit-min-device-pixel-ratio: 2)
               and ( min--moz-device-pixel-ratio: 2)
               and (orientation: landscape)  {

Here how to show on Firefox

enter image description here

Here how to show on Chrome;

enter image description here

How to see, on Chrome to show the nav different…, also to come an Element which I will not display it, it displays on Chrome but not on Firefox…

Can please anyone explains my mistake, because display this element on Chrome.

very Thanks for your answer!

You need the show the CSS relevant to that set of elements, just showing a media query isn’t terribly helpful.

Also, same question as previously: why are you trying to target specific devices using specific widths? Are you literally trying to write media queries for every actual physical device? Because there are thousands and thousands of different devices, that’s not what media queries are for. You could basically spend the rest of your life doing this, and it’s waste of time


Are you literally trying to write media queries for every actual physical device?

The answer for your here, yesterday to come similar question…

If you really need to do device specific media queries, you definitely want the width in pixels, not ems. I looked further into the whole “using ems for media queries” thing, and it looks like it was done to get around a Safari zoom bug that has since been fixed. Using ems for a device width is basically hardwiring the assumption that 1em = 16px but that’s only true if the browser hasn’t set a different base size. And some do.

Then again, do you really want a thousand different breakpoint definitions to maintain? The whole point of responsive layout is to not have to worry about minor differences like that.

1 Like

I can’t stress enough that (unless you have an incredibly good reason for targeting a specific device and media queries are literally the only way you can do it) it is a complete and utter waste of time writing media queries for every device on earth.

The process should be something like, using the responsive view in a browser:

  1. Write CSS for an element/group of elements (eg a navbar) that looks good at a small screen size
  2. Increase the screen size until your element breaks visually. Write a media query to provide CSS to fix it (and (min-width: 600px) for example).
  3. Repeat 2 until you’ve covered up to wide desktop size (and tbh you should rarely need to go past step 2).

Or you can go in reverse, start at desktop and go down. Starting at mobile is normally easier. Trying to target every device is nuts because

you meint as here to say…
I employ it for Elements on the Page, per example for CSS…

my website show gut that problem is with nav

Those are conventional generic breakpoints, made popular by bootstrap. One of them may reference the iPad, but 1024x768 was a pretty common resolution going way back to olden times.

My final piece of advice on this matter: Use those. Just those.

I looked at the post you referenced, and as one example of why what you’re trying to do is completely futile:

You cannot hover, it’s not physically possible. There’s absolutely zero point in very carefully trying to target devices because of near-imperceptible differences in rendering, particularly when the thing you’re trying to account for doesn’t work on the device. And these are crude simulators (they aren’t even the real thing!).

Because i have not a smartphone,(i have a cheap mobile…) i don’t know how my website on smartphone to show…

Do you understand why what you were trying to account for (:hover) was pointless?

i think…

i used :hover as here to say, i to try to have similar effect as have on Desktop.

What recommendation you give me for build media query to catch most tablet and smartphone ?

You generally cannot hover on a phone because it’s not physically possible. Think about this logically. Some devices/browsers “implement” it in different ways (one click to hover, then another to activate for example), but they aren’t under any obligation to. A very few devices can tell whether a user has a finger above an area of screen: this allows for them to determine pointing behaviour, but hover effects are generally still pointless because a person’s finger is generally going to obscure the thing they’re hovering over.

Exactly like I said. Make the site work at a small size. Like literally a small size, make the browser window about the size of a small smartphone screen. Then once it all works, increase the size until something breaks. Then write a media query for that size to fix the thing that broke.

Or go from desktop size, make it work there, then make the screen smaller until something breaks

Can please give a example how to do

Make the viewport small by opening the responsive tools in the browser and setting the width to something like 400px.

Make the site work, using CSS.

Once it all works, move your mouse to point at the right hand side of the responsive viewport, drag right to increase the width.

Once something on the site breaks, write a media query to fix it. eg if the navbar needed to change style at 600px, write @media screen and (min-width: 600px) { and write some CSS to fix the issue.

(Or start at desktop size and get smaller)

i have in all site,

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

Here how have my media query for desktop tablet and smartphone

No, I mean literally open the browser and actually look at the site that you’re trying to apply CSS to

yes, I understand you… , i will only to show you how to have now…, to till have nothing to change…

now to come similar on Firefox and Chrome…

I write on my media query as here to say;

  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 274dpi),
  only screen and (                min-resolution: 2dppx) { 

Tomorro i will to try as you to me to say…
you mein this…

@media screen and (min-width: 80em) {}

@media screen and (max-width: 80em) and (min-width: 60em) {}

@media screen and (max-width: 60em) {}

Also I will write on viewport this,

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

I wish you a happ:grinning:y new year!

Sure, just carry on; have a great new year