Question

如果我有一个Javascript：

检测负载时的屏幕尺寸
根据此

当iPhone从纵向/横向旋转时，iPhone如何处理？它重新加载内容吗？如果没有，你怎么能检测到它被旋转？

Answer 1

Tom我不确定您是否了解css3媒体查询，这些是处理各种屏幕尺寸和分辨率的嵌套方式。

您可以在http://www.w3.org/TR/css3-mediaqueries/

找到规范

使用css3媒体查询，浏览器将加载与链接标记的media属性中指定查询匹配的样式表。

下面的一些示例是一些可能有用的用例

如何检测它被旋转？

例如：

 <!-- 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％的容器宽度，浏览器将适应它。

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

Answer 3

也许您正在寻找的是Mobile Safari的orientationchange事件：

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

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

关于iPhone旋转时HTML的问题

4 个答案: