iPad Safari 的可用区域有多大答案

【问题标题】：How large is the usable area in iPad SafariiPad Safari 的可用区域有多大
【发布时间】：2010-05-21 08:19:40
【问题描述】：

我正在为 iPad 开发一个网络应用程序，以在 Safari 中运行。我还没有 iPad 可以测试。有谁知道可用的屏幕尺寸 - 在 safari/ipad 控件的任何空间被占用后？

【问题讨论】：

标签： ipad mobile-safari

【解决方案1】：

您应该只关注TN2262 并编写维度不变的代码。

如果您需要逻辑像素大小，document.body.client[Width|Height] 始终为 980×1208。

就可以使用的绝对像素而言，Mobile Safari 的导航栏大约占 78px，因此纵向为 768×946，横向为 1024×690。

也可以有一个键盘（纵向高度为 308 像素，横向高度为 397 像素）。

更新：以上绝对数字仅适用于 iOS 4.x 或更早版本。在 iOS 5.x 中，Apple 引入了标签栏，将导航栏 + 状态栏的高度增加到 96px。实际上，即使在 iOS 5.x 之前，书签栏的存在也会影响视口。

【讨论】：

这是错误的，据我所知，尺寸实际上是：横向：1024x672 和纵向：768x928。我认为 KennyTM 没有考虑到屏幕顶部的 ipad 状态栏..
@user333216：没错。请考虑到 2010 年的 Safari 没有标签栏。例如在ipatrix.com/wp-content/uploads/17-Safari.png 中导航栏+状态栏是 78px 高。查看更新的答案。
没有“维数不变码”之类的东西。响应式设计背后的理念是“充分利用每台设备”，了解真实设备上最常见的分辨率有助于使其正确。这就是为什么我觉得这个问题很重要
请使用我在下面发布的 HTML 代码来测量您设备上的可用区域。在几乎所有类型的设备上进行了测试；-)
我使用了运行 iOS 7.1 (11D167) 的 iOS 模拟器，发现 Safari 的 chrome 现在是 97px 高度而不是 96px。因此，横向是 1024x671，纵向是 768x927。 This comment 支持我的发现。

【解决方案2】：

如果您想了解屏幕方面的信息，您可以查看iPad Peek 并加载类似NYTIMES 的网站。这给出了 iPad 的确切可用屏幕尺寸。

希望对你有帮助

【讨论】：

【解决方案3】：

所以 - 在我的 ipad（ipad1、ios 5.1.1）上，我得到的数字与上面略有不同。可能是因为标签和书签栏正在显示。
我的价值观：

肖像：768 x 900 风景：1024 x 644

所以我写了一个 javascript 小书签来获得一个肯定的结果。您可以通过电子邮件将其发送给自己，在 safari 中转到“about:blank”，创建书签，对其进行编辑并从电子邮件中剪切/粘贴此代码:)

当您运行小书签时，重新调整 div 的大小，直到它与窗口和 tada 匹配..

<pre><code>
javascript:( function(){
  "use strict";
  var bmIdVal = "ios_screen_res_test_bookmarklet";
  var bmDivSize = {
    w : 320,
    h : 240 
  };

  var vpMeta1 = document.createElement('meta');
  vpMeta1.setAttribute("name","viewport");
  vpMeta1.setAttribute("content",'initial-scale=1.0, user-scalable=no');
  document.head.appendChild(vpMeta1);

  function updateStatus(){
    statusDiv.innerHTML = "div is " + bmDivSize.w + ',' + bmDivSize.h + 
      " doc body says: " + document.body.clientWidth + "," + 
      document.body.clientHeight;
  }

  function resizeBmDiv(wPx,hPx){
    bmDivSize.w += wPx;
    bmDivSize.h += hPx;
    bmDiv.style.width=bmDivSize.w + "px";
    bmDiv.style.height=bmDivSize.h + "px";
    updateStatus();
  }

  var prevBmDiv = document.getElementById(bmIdVal); 
  if( prevBmDiv != null){
    document.body.removeChild(prevBmDiv);
  }
  var bmDiv = document.createElement("div");
  bmDiv.setAttribute("id",bmIdVal);
  bmDiv.style.cssText = 
    "position:absolute;left:0px;top:0px;background-color: #0066FF";
  bmDiv.style.width=bmDivSize.w + "px";
  bmDiv.style.height=bmDivSize.h + "px";

  var sizerB_w1 = document.createElement("button");
  sizerB_w1.style.cssText = "width:64px;height:64px";
  sizerB_w1.innerHTML="w+1";
  sizerB_w1.onclick = function(evt){
    resizeBmDiv(1,0);
  };
  var sizerB_w100 = document.createElement("button");
  sizerB_w100.style.cssText = "width:64px;height:64px";
  sizerB_w100.innerHTML="w+100";
  sizerB_w100.onclick = function(evt){
    resizeBmDiv(100,0);
  };
  var sizerB_h1 = document.createElement("button");
  sizerB_h1.style.cssText = "width:64px;height:64px";
  sizerB_h1.innerHTML="h+1";
  sizerB_h1.onclick = function(evt){
    resizeBmDiv(0,1);
  };
  var sizerB_h100 = document.createElement("button");
  sizerB_h100.style.cssText = "width:64px;height:64px";
  sizerB_h100.innerHTML="h+100";
  sizerB_h100.onclick = function(evt){
    resizeBmDiv(0,100);
  };

  var sizerDiv = document.createElement('div');
  sizerDiv.appendChild(sizerB_w1);
  sizerDiv.appendChild(sizerB_w100);
  sizerDiv.appendChild(sizerB_h1);
  sizerDiv.appendChild(sizerB_h100);

  var sizerB_wm1 = document.createElement("button");
  sizerB_wm1.style.cssText = "width:64px;height:64px";
  sizerB_wm1.innerHTML="w-1";
  sizerB_wm1.onclick = function(evt){
    resizeBmDiv(-1,0);
  };
  var sizerB_wm100 = document.createElement("button");
  sizerB_wm100.style.cssText = "width:64px;height:64px";
  sizerB_wm100.innerHTML="w-100";
  sizerB_wm100.onclick = function(evt){
    resizeBmDiv(-100,0);
  };
  var sizerB_hm1 = document.createElement("button");
  sizerB_hm1.style.cssText = "width:64px;height:64px";
  sizerB_hm1.innerHTML="h-1";
  sizerB_hm1.onclick = function(evt){
    resizeBmDiv(0,-1);
  };
  var sizerB_hm100 = document.createElement("button");
  sizerB_hm100.style.cssText = "width:64px;height:64px";
  sizerB_hm100.innerHTML="h-100";
  sizerB_hm100.onclick = function(evt){
    resizeBmDiv(0,-100);
  };

  var sizerMDiv = document.createElement('div');
  sizerMDiv.appendChild(sizerB_wm1);
  sizerMDiv.appendChild(sizerB_wm100);
  sizerMDiv.appendChild(sizerB_hm1);
  sizerMDiv.appendChild(sizerB_hm100);

  var statusDiv = document.createElement('div');
  statusDiv.style.cssText = "color:white;";

  bmDiv.appendChild(statusDiv);
  bmDiv.appendChild(sizerDiv);
  bmDiv.appendChild(sizerMDiv);
  document.body.appendChild(bmDiv);
  updateStatus();  
})();
</code></pre>

【讨论】：

多么棒的主意！！！我用那个 JS 代码生成了一个 HTML 文件，它在任何设备上都非常好用！只需将 'initial-scale=1.0, user-scalable=no' 替换为 'initial-scale=1.0, maximum-scale=1.0' 即可在您旋转设备时在 iPad 上正确缩放（仍然需要重新加载）。跨度>
编辑：我附上了我的整个 HTML 文件，添加了 w+10 和 h+10 按钮，强制重新加载并在下面更正了视口！ ;-)

【解决方案4】：

我还没有开始为 iPad 编写代码，但通过谷歌搜索得到了这些。可能有用
https://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/
https://developer.apple.com/library/content/technotes/tn2010/tn2262/_index.html

【讨论】：

【解决方案5】：

我编辑了 Andy Idsinga 的答案，创建了一个 HTML 文档，您可以上传到任何地方并在您的设备上运行。我已经更正了视口元标记并在屏幕旋转时设置了自动重新加载。我还添加了 w+10、w-10、h+10、h-10 按钮。如果你喜欢这篇文章，也请给 Andy 点个赞，因为他是原作者！

<html><head>
<title>Screen resolution test (usable area)</title>
</head><body>
<script type="text/javascript">
"use strict";
var bmIdVal = "ios_screen_res_test_bookmarklet";
var bmDivSize = {
    w : 320,
    h : 240 
};

var vpMeta1 = document.createElement('meta');
vpMeta1.setAttribute("name","viewport");
vpMeta1.setAttribute("content",'initial-scale=1.0, maximum-scale=1.0');
document.head.appendChild(vpMeta1);

function updateStatus(){
statusDiv.innerHTML = "div is " + bmDivSize.w + ',' + bmDivSize.h + 
    " doc body says: " + document.body.clientWidth + "," + 
    document.body.clientHeight;
}

function resizeBmDiv(wPx,hPx){
    bmDivSize.w += wPx;
    bmDivSize.h += hPx;
    bmDiv.style.width=bmDivSize.w + "px";
    bmDiv.style.height=bmDivSize.h + "px";
    updateStatus();
}

var prevBmDiv = document.getElementById(bmIdVal); 
if( prevBmDiv != null){
    document.body.removeChild(prevBmDiv);
}
var bmDiv = document.createElement("div");
bmDiv.setAttribute("id",bmIdVal);
bmDiv.style.cssText = "position:absolute;left:0px;top:0px;background-color: #0066FF";
bmDiv.style.width=bmDivSize.w + "px";
bmDiv.style.height=bmDivSize.h + "px";

var sizerB_w1 = document.createElement("button");
sizerB_w1.style.cssText = "width:64px;height:64px";
sizerB_w1.innerHTML="w+1";
sizerB_w1.onclick = function(evt){
    resizeBmDiv(1,0);
};
var sizerB_w100 = document.createElement("button");
sizerB_w100.style.cssText = "width:64px;height:64px";
sizerB_w100.innerHTML="w+100";
sizerB_w100.onclick = function(evt){
    resizeBmDiv(100,0);
};
var sizerB_h1 = document.createElement("button");
sizerB_h1.style.cssText = "width:64px;height:64px";
sizerB_h1.innerHTML="h+1";
sizerB_h1.onclick = function(evt){
    resizeBmDiv(0,1);
};
var sizerB_h100 = document.createElement("button");
sizerB_h100.style.cssText = "width:64px;height:64px";
sizerB_h100.innerHTML="h+100";
sizerB_h100.onclick = function(evt){
    resizeBmDiv(0,100);
};

var sizerDiv = document.createElement('div');
sizerDiv.appendChild(sizerB_w1);
sizerDiv.appendChild(sizerB_w100);
sizerDiv.appendChild(sizerB_h1);
sizerDiv.appendChild(sizerB_h100);

var sizerB_wm1 = document.createElement("button");
sizerB_wm1.style.cssText = "width:64px;height:64px";
sizerB_wm1.innerHTML="w-1";
sizerB_wm1.onclick = function(evt){
    resizeBmDiv(-1,0);
};
var sizerB_wm100 = document.createElement("button");
sizerB_wm100.style.cssText = "width:64px;height:64px";
sizerB_wm100.innerHTML="w-100";
sizerB_wm100.onclick = function(evt){
    resizeBmDiv(-100,0);
};
var sizerB_hm1 = document.createElement("button");
sizerB_hm1.style.cssText = "width:64px;height:64px";
sizerB_hm1.innerHTML="h-1";
sizerB_hm1.onclick = function(evt){
    resizeBmDiv(0,-1);
};
var sizerB_hm100 = document.createElement("button");
sizerB_hm100.style.cssText = "width:64px;height:64px";
sizerB_hm100.innerHTML="h-100";
sizerB_hm100.onclick = function(evt){
    resizeBmDiv(0,-100);
};

var sizerMDiv = document.createElement('div');
sizerMDiv.appendChild(sizerB_wm1);
sizerMDiv.appendChild(sizerB_wm100);
sizerMDiv.appendChild(sizerB_hm1);
sizerMDiv.appendChild(sizerB_hm100);

var sizerC_w10 = document.createElement("button");
sizerC_w10.style.cssText = "width:64px;height:64px";
sizerC_w10.innerHTML="w+10";
sizerC_w10.onclick = function(evt){
    resizeBmDiv(10,0);
};
var sizerC_h10 = document.createElement("button");
sizerC_h10.style.cssText = "width:64px;height:64px";
sizerC_h10.innerHTML="h+10";
sizerC_h10.onclick = function(evt){
    resizeBmDiv(0,10);
};
var sizerC_Mw10 = document.createElement("button");
sizerC_Mw10.style.cssText = "width:64px;height:64px";
sizerC_Mw10.innerHTML="w-10";
sizerC_Mw10.onclick = function(evt){
    resizeBmDiv(-10,0);
};
var sizerC_Mh10 = document.createElement("button");
sizerC_Mh10.style.cssText = "width:64px;height:64px";
sizerC_Mh10.innerHTML="h-10";
sizerC_Mh10.onclick = function(evt){
    resizeBmDiv(0,-10);
};

var sizerCDiv = document.createElement('div');
sizerCDiv.appendChild(sizerC_w10);
sizerCDiv.appendChild(sizerC_h10);
sizerCDiv.appendChild(sizerC_Mw10);
sizerCDiv.appendChild(sizerC_Mh10);

var statusDiv = document.createElement('div');
statusDiv.style.cssText = "color:white;";

bmDiv.appendChild(statusDiv);
bmDiv.appendChild(sizerDiv);
bmDiv.appendChild(sizerMDiv);
bmDiv.appendChild(sizerCDiv);
document.body.appendChild(bmDiv);
updateStatus();

window.onresize = function(event) {
    document.location.reload(true);
}
</script>
</body></html>

【讨论】：

【解决方案6】：

以上答案是错误的。 ipad header的实际大小是64px。因此，ipad的纵向是= 768X960，横向是= 1024x704 您还可以检查 ipad 在纵向和横向方向的总尺寸，包括标题高度为 64px，然后它将纵向和横向显示为 768x1024

【讨论】：

你有什么要备份的吗？

【解决方案7】：

上面的“正确”答案实际上是错误的，因为它没有考虑到 ipad 屏幕顶部的黑色状态栏显示时间、电池寿命等。这是一个额外的 18px 屏幕占用.

所以 Safari 中可用的屏幕区域实际上是：风景：1024x672 肖像：768x928

【讨论】：

我不在电脑前检查这个，但我相信您可以将状态栏设置为透明，然后保留该空间。

【解决方案8】：

只需检查http://benfrain.com/downloads/respond.html 即可查看视口的当前尺寸。

或者更好地使用这个书签： http://lab.maltewassermann.com/viewport-resizer/ 这将显示所有类型设备的当前尺寸（也可以定制）。可以在每个网站上进行测试。

【讨论】：