移动设备的CSS调整

Question

e 与我们用来编写的普通 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 */
 }

并进一步研究媒体查询。

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