viewport for iphone and ipad portrait

Question

I have this site here:

http://powellgroupconstruction.com/

and I have the viewports set to this:

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

and this looks great on my ipad landscape. but on my iphone the site everything looks huge! and on the landscape its a bit too wide...does that have anything to do with the viewports or do I need to do a media query my css page wrapper:

.contentPowell {
background-color: #FFF;
width: 1024px;
min-height: 300px;
margin: 0 auto;
box-shadow: 12px 0 15px -4px #888, -12px 0 8px -4px #888;
position: relative;
z-index: 999999;
padding-bottom: 30px;
}

of my footer?

.footerPowell{ width:1024px; }

Answer 1

If it were me, I would build the iphone version to 320px width, and use a viewport of 1.0 like you have in your example. Your current code is built for 1024px, so the viewport makes the iphone view about 1/3 of that, and it can scroll left and right.

Here is an example of the Iphone version built to 320px, using your same code, with just a few elements changed for width, as well as the minor css updates shown below.

Open this on iphone to see a view I think you're intending: http://miroapps.com/test.html

<style type="text/css">
    .entry-content ul{ list-style:none; float:left; width:90%; }
    .entry-content ul li{ float:left;
                        /*width:33%;*/
                         background-color:#000; margin:5px; max-height:234px; padding-bottom:30px; }
    .entry-content ul li a{ color:#FFF; text-decoration:none; }
    .entry-content ul li a:hover{ text-decoration:none; }
    .entry-content ul li a:visited{ color:#FFF; }
    .entry-content ul li a h2{ text-align:center; margin-bottom:0px; }
    .entry-content ul li a h2 a{ }
    .entry-content ul li a h2 a img{ margin-top:15px; }

    .contentPowell {
        width: 320px;
    }

    .entry-content {
        width:320px;
    }
</style>

You would then leave the existing code in place for IPAD, and perhaps just do a device detection somehow to include the 320px overrides just for iphone. Or, include a css class for iphone only and include them that way.