How can I force a site to scale to fix for mobile (Iphone android..)

Question

When I load my site in an iphone it doesn't scale down. All I see is the top-left most couple hundred sqare pixels. I am new to mobile optimization, but I feel like most pages scroll to fit automatically, and most questions seem to be for the opposite scenario that I am having (force phone not to scale down).

I would want the whole page width to be visable and to make it so the user would have to zoom in to read the text.

I have tried with and without the following code in the head, but with no apparent effect.

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

<!--  I Also tried: -->
<meta name="viewport" content="width=1024, initial-scale=1">   

Answer 1

Using the docs here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

It seemed like you should ignore most of the viewport properties and just set user-scalable to "yes". It's working on my iphone now.

<meta name="viewport" content="user-scalable = yes">

Edit:: The mobile tester site doesn't allow scaling, so it just gives scrollbars. With an actual phone this works.