移动设备的Css调整

Question

无论使用何种移动设备，我们用来编写的普通css都可以用于移动设备。我正在开发移动应用程序，我已经编写了以下css来显示一些数据

<div style="float: left; width: 90%; margin: 0 auto;">
        <div style="float: left; width: 20%; height: auto;">
            <img style="height: 100px; width: 100px;"
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvYw0Fzp3l9dRMBOyRr-MVP_sDgMpyH2V5-iOjHVTzIqlJuwiv3Nsd7fE4" />
        </div>

        <div style="float: left; width: 70%">
            <div style="padding-left: 7%; float: left;">
                <p>Name:</p>
            </div>
            <div style="float: left; margin-left: 1%;">
                ABCD
            </div>
        </div>
    </div>

但是当我在不同的模拟器中查看它时，o / p显示如下。有人可以帮助我。

根据答案进行编辑

/*IPad*/
@media only screen and (min-device-width: 1114px) and (max-device-height: 1391px) and (orientation:portrait)
{
    #divName
    {
        margin-left: -6%;
        float: left;
    }
}

@media only screen and (min-device-width: 1114px) and (max-device-height: 1391px) and (orientation:landscape)
{

    #divName
    {
        margin-left: -11%;
        float: left;
    }
}

/*IPhone*/

@media all and (min-device-width: 440px) and (max-device-height: 802px) and (orientation:landscape)
{

    #divName
    {
        margin-left: 7%;
        float: left;
    }
}

@media all and (min-device-width: 440px) and (max-device-height: 802px) and (orientation:portrait)
{

    #divName
    {
        margin-left: 25%;
        float: left;
    }
}

<div style="float: left; width: 70%">
            <div id="divName">
                <p>Name:</p>
            </div>
            <!--<div style="float: left; margin-left: 1%;">
                ABCD
            </div>-->
        </div>

Answer 1

您可以为每个方向创建不同的样式：

 @media all and (orientation:portrait) {
 /* Style adjustments for portrait mode goes here */
 }

 @media all and (orientation:landscape) {
   /* Style adjustments for landscape mode goes here */
 }

在media queries上进行更多研究。

http://css-tricks.com/css-media-queries/