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

Answer 1

Get rid of the width=1024, just put in

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

And, clear out your phone's browser cache. Might even have to turn off & back on afterwards.

Answer 2

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.

Answer 3

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 4

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.