How Do I Make My Site Full Size in Mobile?

Question

I have tried every variation I can think of to try and get my site to show up correctly on mobile. I've entered these codes into my head tags, but to no avail:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=10.0,initial-scale=1.0" />

And all other variations! Nothing makes me able to change the original look of the site on mobile, or allow me to zoom in or out! I have no idea what to do next. If there's ANY advice you guys can give, I'm desperate.

The site is www.justthestork.com

Answer 1

Sounds like you want your site to load as it does on a desktop browser but zoomed out? In that case you want to give your content a constant width that's larger than the screen size:

<meta name="viewport" content="width=1024">

This means that your page will layout into a window that's 1024 pixels wide (you can adjust the width to see what looks best). The browser will then zoom out until it fits on the screen.

If you don't specify a viewport <meta> at all, the browser will pick a default width (eg 980px).

Answer 2

在这里试试这个，它应该强制正确的屏幕尺寸：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">