移動設備的Css調整

與我們用來寫入的正常css無論使用的移動設備如何，都可以用於移動設備。我的工作，其中我寫了下面的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是顯示如下移動應用程序。所以有人可以幫助我。

enter image description here

編輯按答案

/*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>

來源

2014-01-27 Ramakrishna

您可以爲每個方向打造不同的風格：

@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/

來源

2014-01-27 06:37:13 JunM

我怎樣才能檢測方向是否portarit或橫向或從該設備加載應用程序 – Ramakrishna

的'code'我給你可以檢測到設備的方向。 '方向：肖像'和'方向：風景' – JunM

@Ramakrishna你可以看一看這個非常簡單的例子[如果你將窗口大小調整爲像人像，文字顏色會變成綠色，否則紅色]：http：// jsfiddle .net/4vp6J/1/ – JunM

移動設備的Css調整

回答

相關問題