title: How to make mobile page fit on the screen once open?
body: <p>I need to put together website for mobile devices, so iPhones and various androids. The problem is I struggle with getting viewport right and other settings. My goal is so webpage would be coded for specific width e.g. 640px wide. Then once open device would zoom it in/out to the width of the screen so everything became larger or smaller same like after zoomig in/out via pinching on the device screen. </p>
  
  <p>So I would like to develop it for lets say 640px width and depending on device it would scale up or down once open. So if device screen would be 960px wide it would automatically scale to this width via viewport somehow. Is this possible at all to have it coded for predefined width  in css and have zoomed in/out as needed by device itself?</p>
  
  <p>I apologize if the question is too generic, will explain details if needed.</p>
  
  <p>EDIT:
  So the most common approach if I understand correctly is to provide few layout versions for most commons screen sizes? Using media queries in css provide different values for  widths, fonts sizes etc is that right?</p>
  
  <p>If I decide however to go with percentages rather than media queries, given the design provided I think still would have a problem with resizing fonts as layout has images with text in it and text needs to be proportional to the image. Also percentages would take care of widths, height might be an issue though as the images would have to be resized vertically too. Some parts of the design would need to "fit" each other it seems and it would become problem I think.</p>
  
  <p>Now if I simply build a website of certain width, lets say 640px I should be able to position everything on the screen with pixels, no diffeent from normal non-mobile website.</p>
  
  <p>So I tried to set <code>&lt;meta name="viewport" content="width=640"&gt;</code> and inside of a page set width of widest container in css to 640px making page width 640px basically. If I understand correctly it will set up viewport to exact width of the page. So the page would be build as any other non-mobile webpage. User will have to adjust scale by pinching as when the page opens it is usually zoomed in/out for some reason. Is my understanding of what is happening here correct or is there some problem with it. Having it predefined size takes care of different mobile screen sizes as viewport is always same, fits into page width and only scale seems the problem, that is unless I'm missing something here.</p>
  
  <p>I also should have mentioned that I need to do only portrait and make it only option, so no landscape view (that will be another question).</p>
  
  <p>Would love to know your thoughts and I appreciate all the answers so far.</p>