mobilemobile-websitescreen-size

Should I use device-width or a fixed width for my viewport


When creating a mobile optimized web page, I'm trying to figure out the pros and cons of using device-width vs. fixed width in the viewport meta tag.

Fixed width:

<meta name="viewport" content="width=640" />

Device width

<meta name="viewport" content="width=device-width" />

What is the benefits of using device-width over a fixed width? Because to me the solution of creating a 640px wide webpage with a 640px wide viewport is the simplest to create a page that always fills the entire width of the screen not matter the actual width/height specs of the phone.

I can maybe see some problems when using fixed width if I want to support both landscape / portrait? Or maybe it has something to do with you can't use media queries for targeting because it will always assume the fixed width?


Solution

  • I use this viewport:

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

    I had problems with scaling when I change the orientation of the device, but with this, whatever the orientation (horizontal/vertical) the mobile website fits the phone screen perfectly.