Same media queries work differently for different RWD methods on the same device?!

MDN Learn
1

In the article (Responsive Design), there are three examples demonstrating float, flexbox and grid technologies.

  1. Grid example: live example - source code

  2. Flexbox example: live example - source code

  3. Float example: live example - source code

All three examples use an identical media query (min-width: 600px) And behave the same when I decrease the viewport width on desktop.

But they don’t behave the same on my mobile.
Examples 1 and 2 (grid & flexbox) render two columns on mobile which means the media query (min-width: 600px) has evaluated to true.
But example 3 (float) renders 1 column on mobile so you can say the media query has not evaluated to true here.

How is it possible? Same media queries, Same device, Different results.

Thanks for your help and by the way, I’ve got a similar problem (which I asked in another topic), I really appreciate if you can check that too.

2

Hello @Vahid.Pouyafar

could you help us here @chrisdavidmills @Rafael_Green

and have a nice day all of you

1 Like
3

first, it’s min-width query, not max-width.
second, most mobile browsers lie about their width.
add this line inside the head element to get the desired results:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
currently it’s only in the Float example

see The viewport meta tag in the article you’re reading

2 Likes
4

Oh yes, thank you @Rafael_Green :grinning: :pray:. I know about viewport meta tag but I didn’t notice it’s not included in the other examples.

Shall I report this as content problem to include viewport meta tag in flexbox and grid examples too?

Could you do me a favour and check this topic too if you’ve got time? :upside_down_face:

5

thanks @Rafael_Green

6

I see this issue is already in progress (opened by @aviv.mu)
It’s still a draft and not ready for review.

7

I’m sorry I forgot to give link: I mean this topic