问题有关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当它旋转

回答

相关问题