Adjusting width for mobile devices

Question

I rewrote my web site to be formatted for mobile devices. However, the display width is inconsistent on different devices. On my android device the width looks fine but on another person's android device the width is much smaller and therefore unreadable.

I use the following viewport in my html file:

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no" /

This is my main div in the html page:

     <div id="maindiv" style="margin-left:1.0em; margin-right:0.5em">

Do I need to put a width paramter in my main div? Or can anyone tell me what I should do to ensure a uniform body width for mobile devices?

Answer 1

you'll need to build a responsive site. If you have fixed widths on divs you'll need to use css media queries. Since IE 8 and older don't support media queries you can use a plugin like respond.js. With this plugin you'll only need to add it to your page and use media queries like you normally would.

Do you have a link to the site?

Media queries can be used for targeting specific browser/device width so you can style things only when the browser/device meets that media querier specification.

However, if you change #maindiv width to 100% or use max-width, I believe this will fix your problem. Also in an external style sheet or on the page you'll want to add the following css to make your images responsive:

img {
max-width:100%
height:auto;
display:inline-block;
}

Also remove:

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no" />

and put:

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