All geek questions in one place

Question about HTML on iPhone when it is rotated

If I have Javascript that:

  • Detects screen size on boot
  • Resize div based on this

When the iPhone rotates from portrait / landscape, how does the iPhone handle this? Does it reload content? If this is not the case, how can you discover that it is spinning?

+4
source share
4 answers

Since your decision should be a basic rethinking of content, the iPhone browser should redisplay everything. You don’t need to upload common items again (images, text, etc.), but you need to redisplay the styles.

Each time you rotate the 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();
0
source

Tom. I'm not sure if you know about css3 media queries, this is a way of nesting different sizes and screen resolutions.

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

With media css3 requests, the browser will load stylesheets that match the specified request in the media attribute of the link tag.

Below are some examples that may help.

how can you detect its rotation?

For instance:

  <!-- 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 layout control method is much faster than javascript manipulation.

More specifically

Does it reload content?

No, it does not reload the content, it displays the same page, therefore, if in your layout, for example, the width of the container is width = 100%, the browser will adapt to this.

+2
source

You should take a look at the Paul Irish HTML5 Boilerplate . It contains many rules that show how to process HTML on iPhone using CSS only. An example of this might 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; } */ }
+1
source

Source: https://habr.com/ru/post/1339621/

More articles:


All Articles