发表新帖
发表新帖

How large is the usable area in iPad Safari

后端 未结
关注
8 595
醉酒成梦
醉酒成梦 2020-12-24 07:44

I\'m developing a web app for the iPad, to run in Safari. I don\'t yet have an iPad to test on. Does anyone know the usable screen size - after any space for the safari/ipad

相关标签:
8条回答
  • 温柔的废话
    2020-12-24 08:13

    You should just follow TN2262 and write dimension-invariant code.

    In case you need a logical pixel size, document.body.client[Width|Height] is always 980×1208.

    In terms of absolute pixels you can use, the navigation bar of Mobile Safari takes up roughly 78px, so in portrait orientation it is 768×946, and in landscape it is 1024×690.

    There can be a keyboard (308px in height in portrait, 397px in landscape) as well.

    Update: The above absolute numbers are correct only for iOS 4.x or before. In iOS 5.x Apple introduced the tab bar which increases the height of navigation bar + status bar to 96px. Actually, even before iOS 5.x, the presence of the bookmark bar can affect the viewport as well.

    0 讨论(0)
  • 夕颜
    2020-12-24 08:20

    I have edited Andy Idsinga answer, creating an HTML document you can upload anywhere and run on your devices. I've corrected viewport metatag and set automatic reload on screen rotation. I've also added w+10, w-10, h+10, h-10 buttons. Please upvote also Andy if you like this, since he was the original author!

    <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>
    0 讨论(0)
  • 忘掉有多难
    2020-12-24 08:22

    So - on my ipad (ipad1, ios 5.1.1) I got slightly different numbers than above. Probably because the tab and bookmarks bars are showing.
    My values:

        portrait  : 768  x 900
    landscape : 1024 x 644

    So I wrote a javascript bookmarklet to get a proof positive result. You can email this to yourself, goto "about:blank" in safari, create a bookmark, edit it and cut/paste this code out of email :)

    When you get the bookmarklet running re-size the div until it matches the window and 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>
    0 讨论(0)
  • 隐瞒了意图╮
    2020-12-24 08:22

    The above answers are wrong. The actual size of header of ipad is 64px. Therefore, in portrait orientation of ipad is = 768X960 and landscape orientation is = 1024x704 You can also check the total dimension of ipad in portrait and landscape orientations including header height as 64px then it will show portrait and landscape orientation as 768x1024

    0 讨论(0)
  • 我在风中等你
    2020-12-24 08:23

    If you want to know screen aspects you could check iPad Peek and load a site like NYTIMES. this gives the exact usable screen dimensions for the iPad.

    Hope this helps

    0 讨论(0)
  • 小蘑菇
    2020-12-24 08:36

    Just check http://benfrain.com/downloads/respond.html to view the current dimensions of the viewport.

    Or even nicer use this bookmarklet: http://lab.maltewassermann.com/viewport-resizer/ This will show current dimensions for all sort of devices (can also be customized). Can be tested with every website.

    0 讨论(0)
 看不清?
提交回复
热议问题