問題有關iPhone HTML當它旋轉

檢測負載屏幕尺寸
的大小調整在此基礎上

當iPhone從旋轉的div人像/風景，iPhone如何處理？它是否重新加載內容？如果沒有，你怎麼能檢測到它正在旋轉？

2011-02-14 Tom Gullen

由於您的解決方案必須是一個重要的內容重新造型iPhone瀏覽器必須重新呈現一切。不需要再次下載常用項目（圖像，文本等），但必須重新呈現樣式。

每當你旋轉你的設備，在iPhone重新加載文件，所以你可以做到以下幾點：

function orient() { 
    switch(window.orientation){ 
     case 0: 
      document.getElementById("orient_css").href = "css/iphone_portrait.css"; 
      break; 

     case -90: 
      document.getElementById("orient_css").href = "css/iphone_landscape.css"; 
      break; 
     case 90: 
      document.getElementById("orient_css").href = "css/iphone_landscape.css"; 
      break; 
    } 
} 

window.onload = orient();

來源

2011-02-14 10:27:54

你怎麼知道，如果手機已經導向？每當發生這種情況時，調用orient（）函數？ – 2011-02-14 10:34:32

每次設備旋轉時，Safari瀏覽器都會重新加載文檔，這就是爲什麼onload事件被調用的原因。但是，這是Safari的行爲。因此，該動作的流程是：「用戶旋轉iPhone」 - >「iPhone檢測到90º角度旋轉並告訴Safari此事件（事實上Safari正在列出此事件）」 - >「Safari重新加載文檔，這就是爲什麼再次調用onLoad事件「 – 2011-02-14 10:39:34

你應該看看保羅愛爾蘭的HTML5 Boilerplate。它包含很多規則，可以告訴你如何僅使用CSS處理iPhone上的HTML。一個例子是：

/* 
* Media queries for responsive design 
* These follow after primary styles so they will successfully override. 
*/ 

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

} 

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

} 

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome) 
    Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ 
@media screen and (max-device-width: 480px) { 
    /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you 
    j.mp/textsizeadjust 
    html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ 
}

來源

2011-02-14 10:26:59

湯姆我不知道你是否意識到CSS3媒體查詢，這些都是鳥巢的方式來處理具有各種屏幕尺寸和分辨率。

你可以找到http://www.w3.org/TR/css3-mediaqueries/

規範用CSS3媒體查詢，瀏覽器將負載匹配的鏈接標籤的媒體屬性中指定的查詢該樣式表。

下面的一些例子，是一些使用情況這可能有助於

你怎麼可以檢測到它旋轉？

例如：

<!-- for all media types(ie: screen, print etc..) and the with is no bigger then 480px load our iphone.css --> 
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> 

<!-- for all media types with a minimum width of 480p, max of 1024px and orientation mode is portrait --> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> 

<!-- Same as above but load but uses the landscape style sheet --> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">

管理佈局的，上面的方法要快得多然後JavaScript操作。

回答更具體

是否重新加載的內容？

不，它不會重新加載內容，它會顯示相同的頁面，所以如果您的佈局具有寬度爲100％的容器寬度，則瀏覽器將適應該內容。

來源

2011-02-14 10:40:12

也許你要尋找的是移動Safari瀏覽器的orientationChange事件：

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

來源

2011-10-25 20:48:23 iangilman

問題有關iPhone HTML當它旋轉

回答

相關問題