移動設備響應式設計佈局

我剛剛從本機iOS開發人員轉移到跨平臺。我正在使用phonegap，並且我想根據設備屏幕大小和方向創建不同的佈局。我想要做的就是類似這樣的代碼移動設備響應式設計佈局

if(orientation == LANDSCAPE) 
{ 
    if(screen.width < 320) 
    { 
     //use css #1 
    } 
    else 
    { 
     //use css #2 
    } 
} 
else //orientation is PORTRAIT 
{ 
    if(screen.width < 320) 
    { 
     //use css #3 
    } 
    else 
    { 
     //use css #4 
    } 
}

或者，如果它不是合適的方式做設計的東西，那麼我該怎麼做呢？

來源

2012-09-24 Zoltan Varadi

爲什麼你要比較的屏幕寬度？是否將iPod/iPhone與iPad比較？或者，是因爲另一個原因？ – Littm

它嚴重依賴於你想要做什麼。如果您打算根據設備的分辨率或屏幕方向更改邏輯或添加/刪除DOM元素，請使用JS方式。如果你正在使用jQuery它的那樣簡單，因爲這：

var deviceWidth = $(window).width(); 
var deviceHeight = $(window).height();

然而，CSS本身取決於屏幕尺寸條件樣式提供了途徑。這些被稱爲media-queries（http://www.w3.org/TR/css3-mediaqueries/），你可以按如下方式使用它們：

@media only screen and (max-device-width: 480px) { 
    body { 
     font-size: 2em; 
     /* etc. these styles will be applied only when device's screen is smaller than 480px */ 
    } 
}

有很多，你可以使用更多的屬性。 max-device-width只是舉例而已。而且可以防止瀏覽器加載樣式文件在所有如果設備的尺寸是不妥當的：

<link rel="stylesheet" media="only screen and (max-width-device: 480px)" href="480-device.css" />

看看W3C的文檔或只搜索media-queries。它們現在幾乎可以與所有瀏覽器兼容：http://caniuse.com/#feat=css-mediaqueries

來源

2012-09-24 07:35:06

我最終解決了這個問題！謝謝！ –

鑑於PhoneGap將Web應用程序封裝到本機shell中，您基本上正在進行Web開發。你需要看看media queries。對於您發佈的代碼，相應的媒體查詢將類似於以下內容：

/* Landscape */ 
@media screen and (orientation: landscape) { 
    /* Landscape styles */ 
} 

/* Portrait */ 
@media screen and (orientation: portrait) { 
    /* Portrait styles */ 
} 

/* Portrait and screen width < 320 */ 
@media screen 
and (orientation: portrait) 
and (max-width: 320px) { 
    /* Portrait styles for screen smaller than 320 pixels */ 
}

媒體查詢規範說，你應該能夠巢媒體的質疑，會更符合你的控制語句的結構，但是unfortunately most modern browsers do not yet support this。

來源

2012-09-24 07:39:11 Matt

我想你可以試試下面的JS代碼：

function _orientationHandler() { 
    if(event.orientation){ 
     if(event.orientation == 'portrait'){ 
      if(screen.width < 320) 
      { 
       //use css #1 
      } 
      else 
      { 
       //use css #2 
      } 
    } 
    else if(event.orientation == 'landscape') { 
     if(screen.width < 320) 
     { 
      //use css #1 
     } 
     else 
     { 
      //use css #2 
     } 
    } 
} 

$(window).bind('orientationchange', _orientationHandler);

來源

2012-09-24 07:44:43 Littm

移動設備響應式設計佈局

回答

相關問題