16

I'm having some problems getting my website to scale correctly for mobile devices.

We have a site that's designed to be a minimum width of 640px, maximum of whatever. I have the meta tag currently: 

<meta name="viewport" content="width=device-width;minimum-scale=0.5,maximum-scale=1.0; user-scalable=1;" />

Now - The part i'm confused about is that if I use "initial-scale=1.0", obviously the site will scale 1:1, and it will look crappy on an iphone 3Gs (will only see half the site). Now, on an Iphone 4, (having a 640px wide resolution) it will be scaled properly at 640px if I use "initial-scale=1.0".

Alternately, if the graphics are 480px, 3Gs would require scale=.667 and iOS 4 would require 1.3, correct?

So how do you get the site to fit perfectly edge to edge? Can the browser detect the device width and then set the scale accordingly?? There are lots of different device widths out there... android, older iphones, blackberry's etc.

Getting quite frusterated :( Feel like i'm missing something important that I should already know.

Edit It seems that the 'initial-scale' meta tag should be scaling the site relative to the viewport, then using width=device-width to set the actual viewport size.

The problem I seem to be having is that the viewport isn't scaling to fit the device, it's staying at 640px no matter what tag I use. What am I missing here???

Jonathan Coe
  • 1,485
  • 4
  • 18
  • 36
  • http://stackoverflow.com/questions/12723844/android-viewport-setting-user-scalable-no-breaks-width-zoom-level-of-viewpor/19430097#19430097 – Habib Mar 18 '14 at 19:09

4 Answers4

12

I think the main issue with the original message is that semi-colons don't appear to work on iPhone 4+. It only works with commas as separators (or only the device-width setting). Other browsers seem to be more tolerant.

The following works reliably for me:

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

You'll also want to disable the body and document from scrolling horizontally:

body, html
{    
    overflow-x: hidden;        
}

Good link for more info on Mozilla Site:

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

Rick Strahl
  • 17,302
  • 14
  • 89
  • 134
  • Using this, but leaving off initial-scale worked for me. I was having trouble with what happened when I rotated my device. `width=device-width,maximum-scale=1, user-scalable=no", name: "viewport"` – Dennis Best Jan 22 '14 at 03:54
9

"width" is to tell the browser how wide your website is at 100% zoom. if you have designed your website to be fluid, you could specify "device-width" here, and the browser won't need to use any zooming, as your layout is designed to fit any viewport width.

"initial-scale" is for overriding the default behaviour of some devices to zoom in or out on your website so that the website width (which you specified above) matches the screen width. setting this to 1 basically says "don't zoom for this, use scroll bars if my website is too wide for the screen, and leave blank space at the sides if it's too narrow". if you do want your website to fill the screen width exactly, don't use initial-scale.

londonwebguy
  • 91
  • 1
  • 1
8

Ok, i've figured it out... essentially.

Because my design is actually 2x the size of the viewport (sort of), the key is just to use "initial scale = 0.5". It works correctly on both devices (3Gs and 4), and more or less correctly on android devices, etc.

Kind of tricky, and it seems like there should be a better way to do this, but for the time being, it works.

Thanks all who provided input.

Jonathan Coe
  • 1,485
  • 4
  • 18
  • 36
  • 1
    I had the same exact problem and used the same exact solution... I'm wondering if you ever found a better way to handle this? – jac300 Sep 17 '13 at 21:29
  • Nearing the end of 2015 here and I'm wondering the same thing. Is this still the best solution? It worked for me, but it feels dirty. In my case I used 0.67. I think the scale should be different depending on pixel density of the device. This feels wrong but nothing else works better. – Spencer Sep 15 '15 at 18:54
7

I believe that the answer is that you want to tell the web browser to always scale the site to 640 pixels. I would even turn off the ability for users to scale the site so that stray drags don't re-size everything.

Try this:

<meta name="viewport" content="width=640; user-scalable=no;" />
profMobi
  • 779
  • 4
  • 14
  • Tried that... doesn't work... literally nothing works in the 'width' field. Tried device-width, tried 640, tried 320, nothing changes the scale of the site. Only initial-scale does anything, but that is only one-device specific, so thats no help :( – Jonathan Coe Aug 22 '11 at 20:26
  • 15
    Preventing the user from zooming a page on a mobile device is very anti-usability. – TravisO Feb 15 '12 at 15:42
  • Using a fixed pixel width worked best for us, but don't the scalable feature. – Mike R Nov 15 '13 at 22:23
  • @TravisO It's not anti-usability if your web application is built with responsive design in the first place. i.e. either don't use the same structure that a desktop break-point would render, and/or use styling so that mobile users don't have to zoom in the first place. – Ben Sewards Feb 17 '14 at 17:40