Why does my responsive design look different on mobile than it does when I adjust the browser size to the exact same resolution?

Question

I've read a few of the related StackOverflow questions:

here , here and here ,

but I feel like I am still without an answer. I have a great responsive design (very simple), that looks great however you re-size the browser on desktop. Now when I inspect the element via Chrome and use their phone preview, everything is so small and tiny. The background doesn't stretch like it does on desktop. The main content doesn't fill the area like it does in the desktop, even when the browser is re-sized to be the same resolution as a phone's.

Yes, I've included the viewport specifications.

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

Honestly, no matter how much I play with the width, it doesn't seem to change anything - in the desktop browser, or on mobile.

Why does a webpage look completely different in a phone's browser than it does in desktop with the browser shrunk to the exact same resolution?

Answer 1

也许user-scalable = 0而不是no？

content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0"