Question about HTML on iPhone when it is rotated

If I have a Javascript that:

• Detects screen size on load
• Resizes div's based on this

When the iPhone is rotated from portrait/landscape, how does iPhone handle this? 开发者_JS百科Does it reload the content? If it doesn't, how can you detect it being rotated?

---

Tom i am not sure if you are aware of css3 media queries, those are the nest way to deal with a variety of screen sizes and resolutions.

You can find the spec at http://www.w3.org/TR/css3-mediaqueries/

With css3 media queries the browser will load the stylesheets which match the specified query within the media attribute of the link tag.

Some examples below, are some use cases which might help

how can you detect it being rotated?

For example:

 <!-- 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"> 

The above method of managing your layout is much faster then javascript manipulation.

Answering more specifically

Does it reload the content?

No it does not reload the content, it displays the same page so if you layout has for example a container width the width=100%, the browser will adapt to that.

---

You should take a look at Paul Irish's HTML5 Boilerplate. It contains a lot of rules that show you how to handle HTML on the iPhone only using CSS. An example of these would be:

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

---

Perhaps what you're looking for is Mobile Safari's orientationchange event:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

---

Since your solution must be a major content re-styling the iPhone browser has to re-render everything. Doesn't need to download again the common items (images, text, etc) but has to re-render the styles.

Everytime you rotate your device, the iPhone reloads the document so you can do the following:

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();