Fighting viewport margins and font boosting

[bjenn85]

I am trying to figure out why my page is not loading correctly with viewport. I am using:

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

I have a 750px wide div wrap around my website and to be clear my website shows perfect with this:

<meta name="viewport" content="770,initial-scale=0.8">

The problem there is font boosting on mobile browsers screws up my paragraphs, the first viewport is the only way to solve this. The problem with the first viewport is that it cuts off the right side of the page and there is no margin which makes clicking pagination links and other items hard. See pictures:

 

Above left side margin is fine.

 

 

Here you see the right side margin whitespacing is nonexistent.

 

Can anyone help me with this?

 

Below are my body and wrap CSS

body{background-color:#FFF}
.wrap{width:750px;margin:20px auto;margin-bottom:0}

[QuickOldCar]

Keep your initial scale to 1 and adjust with an additional media query

 

@media screen and (max-width: 650px) {

.wrap{

width:650px;

}

 

@media screen and (max-width: 480px) {

.wrap{

width:480px;

}

 

And any other adjustments would want.

 

Or do your wrap initally as a %?

.wrap{

width:99%;

}