iPad Safari的可用面积有多大

我正在为iPad开发一个web应用程序，在Safari中运行。我还没有iPad可以测试。在safari/ipad控件占用任何空间后，有人知道可用的屏幕大小吗？

如果您想了解屏幕方面，可以查看并加载类似的网站。这为iPad提供了准确的可用屏幕尺寸

---

希望这有帮助

我还没有开始为iPad编写代码，但通过谷歌搜索得到了这些。可能证明是有用的

您应该遵循并编写维度不变代码

如果需要逻辑像素大小，

document.body.client[宽度|高度]

始终为980×1208

<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>

---

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

也可以有一个键盘（纵向高度308px，横向高度397px）

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

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

因此，Safari中可用的屏幕区域实际上是： 景观：1024x672 肖像：768x928

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

portrait : 768 x 900 landscape : 1024 x 644

---

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

屏幕分辨率测试（可用区域）
“严格使用”；
var bmIdVal=“ios\u屏幕\u res\u测试\u bookmarklet”；
变量bmDivSize={
w:320，
h:240
};
var vpMeta1=document.createElement（'meta'）；
setAttribute（“名称”、“视口”）；
setAttribute（“内容”，“初始比例=1.0，最大比例=1.0”）；
文件.头.附件（vpMeta1）；
函数updateStatus（）{
statusDiv.innerHTML=“div是”+bmDivSize.w+，“+bmDivSize.h+
“文档正文显示：“+document.body.clientWidth+”，“+
document.body.clientHeight；
}
函数大小调整MDIV（wPx、hPx）{
bmDivSize.w+=wPx；
bmDivSize.h+=hPx；
bmDiv.style.width=bmDivSize.w+“px”；
bmDiv.style.height=bmDivSize.h+“px”；
更新状态（）；
}
var prevBmDiv=document.getElementById（bmIdVal）；
if（prevBmDiv！=null）{
文件.body.removeChild（prevBmDiv）；
}
var bmDiv=document.createElement（“div”）；
bmDiv.setAttribute（“id”，bmIdVal）；
bmDiv.style.cssText=“位置：绝对；左侧：0px；顶部：0px；背景色：#0066FF”；
bmDiv.style.width=bmDivSize.w+“px”；
bmDiv.style.height=bmDivSize.h+“px”；
var sizerB_w1=document.createElement（“按钮”）；
sizerB_w1.style.cssText=“宽度：64px；高度：64px”；
sizerB_w1.innerHTML=“w+1”；
sizerB_w1.onclick=函数（evt）{
重新调整MDIV（1,0）；
};
var sizerB_w100=document.createElement（“按钮”）；
sizerB_w100.style.cssText=“宽度：64px；高度：64px”；
sizerB_w100.innerHTML=“w+100”；
sizerB_w100.onclick=函数（evt）{
重新调整MDIV（100,0）；
};
var sizerB_h1=document.createElement（“按钮”）；
sizerB_h1.style.cssText=“宽度：64px；高度：64px”；
sizerB_h1.innerHTML=“h+1”；
sizerB_h1.onclick=函数（evt）{
重新调整MDIV（0,1）；
};
var sizerB_h100=document.createElement（“按钮”）；
sizerB_h100.style.cssText=“宽度：64px；高度：64px”；
sizerB_h100.innerHTML=“h+100”；
sizerB_h100.onclick=函数（evt）{
ResizembMDIV（0100）；
};
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（“按钮”）；
sizerB_wm1.style.cssText=“宽度：64px；高度：64px”；
sizerB_wm1.innerHTML=“w-1”；
sizerB_wm1.onclick=函数（evt）{
重新调整MDIV（-1,0）；
};
var sizerB_wm100=document.createElement（“按钮”）；
sizerB_wm100.style.cssText=“宽度：64px；高度：64px”；
sizerB_wm100.innerHTML=“w-100”；
sizerB_wm100.onclick=函数（evt）{
重新调整MDIV（-100,0）；
};
var sizerB_hm1=document.createElement（“按钮”）；
sizerB_hm1.style.cssText=“宽度：64px；高度：64px”；
sizerB_hm1.innerHTML=“h-1”；
sizerB_hm1.onclick=函数（evt）{
调整MDIV（0，-1）；
};
var sizerB_hm100=document.createElement（“按钮”）；
sizerB_hm100.style.cssText=“宽度：64px；高度：64px”；
sizerB_hm100.innerHTML=“h-100”；
sizerB_hm100.onclick=函数（evt）{
调整MDIV（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（“按钮”）；
sizerC_w10.style.cssText=“宽度：64px；高度：64px”；
sizerC_w10.innerHTML=“w+10”；
sizerC_w10.onclick=函数（evt）{
重组MDIV（10,0）；
};
var sizerC_h10=document.createElement（“按钮”）；
sizerC_h10.style.cssText=“宽度：64px；高度：64px”；
sizerC_h10.innerHTML=“h+10”；
sizerC_h10.onclick=函数（evt）{
重新调整MDIV（0,10）；
};
var sizerC_Mw10=document.createElement（“按钮”）；
sizerC_Mw10.style.cssText=“宽度：64px；高度：64px”；
sizerC_Mw10.innerHTML=“w-10”；
sizerC_Mw10.onclick=函数（evt）{
重组MDIV（-10,0）；
};
var sizerC_Mh10=document.createElement（“按钮”）；
sizerC_Mh10.style.cssText=“宽度：64px；高度：64px”；
sizerC_Mh10.innerHTML=“h-10”；
sizerC_Mh10.onclick=函数（evt）{
重新调整MDIV（0，-10）；
};
var sizerCDiv=document.createElement（'div'）；
sizerCDiv.appendChild（sizerC_w10）；
Sizerdiv。
<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>