当iPhone旋转时，关于HTML的问题

Question

如果我有一个Javascript：

• 在加载时检测屏幕大小
• 根据此调整div的大小

当iPhone从纵向/横向旋转时，iPhone如何处理？它会重新加载内容吗？如果不是，如何检测它被旋转了？

如果iPhone被旋转，它不会重新加载内容。您可以通过监听window对象的resize事件来检测它是否被旋转。当屏幕大小发生变化时，该事件将被触发。

- Tom Gullen

Answer 1

Tom，我不确定你是否了解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操作更快。

更具体地回答：

它会重新加载内容吗？

不，它不会重新加载内容，它显示相同的页面，因此如果您的布局例如容器宽度为width=100％，则浏览器将适应该宽度。

- Joao Da Silva

Answer 2

你应该看一下 Paul Irish 的 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; } */
}

- White Elephant

Answer 3

也许你正在寻找的是移动版Safari的方向更改事件:

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

- iangilman

Answer 4

由于您的解决方案必须是对主要内容进行重新设计，因此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();

- João Louros

---

你如何知道手机是否已经被定向？每次发生这种情况时，是否调用orient()函数？ - Tom Gullen

每次设备旋转时，Safari浏览器会重新加载文档，这就是为什么onload事件被调用的原因。然而，这是Safari的行为。因此，操作流程如下：“用户旋转iPhone”->“iPhone检测到90度角旋转并告诉Safari这个事件（实际上Safari正在监听此事件）”->“Safari重新加载文档，这就是为什么onLoad事件再次被调用的原因”。 - João Louros

实际上，您不能指望WebKit的资产缓存中包含所有资产。例如，此缓存中只有少量存储空间，如果您的所有资产的总大小大于此值，则缓存将缺少某些数据并且必须再次获取它们。 - jer