How to remove whitespace in ipad?

Question

I am using bootstrap responsive design, when viewing my webpage in iPad it results in empty whitespace at right side, i set width as device-width in viewport meta tag, how to remove empty whitespace?

I tried this, nothing works correctly

Answer 1

White-space is a text char. Just make text invisible using font: 0/0 a;. Let me explain. Two examples with common HTML:

<div>
<!--White-space -->
<span>Some text here<span>
</div>

Example 1. With white-space on iPad(jsfiddle) with css:

div {
    background: red;
}

span {
    background: blue;
    color: #fff;
}

Example 2. Without white-space on iPad(jsfiddle) with css:

CSS:

div {
    background: red;
    font: 0/0 a;/*make text invisible for parent container with white-spaces*/
}

span {
    background: blue;
    color: #fff;
    font: 12px/normal Arial, sans-serif;/*set back font for child container*/
    display:inline-block;/*just for good render effect*/
}