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.

Answer 2

try to use different css and switch them (server side) based on the client settings. For example the iPhone will identity himself like:

 HTTP_USER_AGENT=Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) 
 AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C25 Safari/419.3

Depending on what scripting language you have available on the server side, you could change the css.

Here is an example.

Answer 3

The viewport tag controls what part of the page is going to be shown initially, but the page itself should still be designed for a 320x460 screen size to be shown on the iPhone without zooming. If you don't want to modify the structure of the page, viewport gives you control over how the page is initially shown.