I am using bootstrap with their grid system combined with @media rules in CSS to control the padding on screen breaks.
The structure is a two columns display defined as col-md-4, right hand and col-md-8, left hand. To centre and "squeeze" the columns, we define padding such that there is a 15% padding on the left hand side of the left column and a 15% padding on the right of the right column.. This displays perfectly in conventional browsers, however on the electric studio ipad simulation the padding is screwed up on the right column and the padding is switched. The developer tools show that the render has ignored all the media rules and somehow implemented the column break for screens over 768px? We have a break at 991px wide.

The html is

    <div class="row" id="PnlProfile">
        <div class="col-md-4 pnlprofl">
            <div id="PnlAssocSummList">
                <h1>
                    <uc2:CitrusLiteralService ID="LitAssocSummHdr" runat="server" />
                </h1>
                <uc3:CitrusAssociatesList ID="CitAssocList" runat="server" />
            </div>
        </div>
        <div class="col-md-8 pnlprofr">
            <div id="PnlAssocProfile">
                <asp:Image ID="ImgProfImg" CssClass="img-responsive" runat="server" />
                <h1>
                    <asp:Literal ID="LitAssociateName" runat="server"></asp:Literal>
                </h1>
                <h3>
                    <asp:Literal ID="LitAssociateTitle" runat="server"></asp:Literal>
                </h3>
                <div id="PnlAssociateBio">
                    <asp:Literal ID="LitAssociateBio" runat="server"></asp:Literal>
                </div>
            </div>
        </div>
    </div>
The output on the render display for developer tools on the ipad simulation is shown in the attached image