web-dev-qa-db-ja.com

iPad Safariで使用可能な領域の大きさ

私は、Safariで実行するiPad用のWebアプリを開発しています。テストするiPadがまだありません。誰もが使用可能な画面サイズを知っていますか-サファリ/ iPadコントロールのためのスペースが占有された後？

ipadmobile-safari
27
Mr. Flibble

TN2262 に従って、次元不変コードを記述する必要があります。

論理的なピクセルサイズが必要な場合は、document.body.client[Width|Height]は常に980×1208です。

使用できる絶対ピクセルの観点では、Mobile Safariのナビゲーションバーは約78ピクセルを占めるため、縦向きでは768×946、横向きでは1024×690です。

キーボード（ポートレートでは高さ308ピクセル、ランドスケープでは397ピクセル）も使用できます。

更新：上記の絶対数は、iOS 4.x以前でのみ正しい。 iOS 5.xでは、Appleは、ナビゲーションバー+ステータスバーの高さを96pxに増やすタブバーを導入しました。実際、iOS 5.xより前でも、ブックマークバーの存在は、ビューポートも同様です。

42
kennytm

画面の側面を知りたい場合は、 iPad Peek を確認し、 [〜＃〜] nytimes [〜＃〜] のようなサイトをロードできます。これにより、iPadで使用可能な正確な画面サイズが得られます。

お役に立てれば

4
dkris

だから-私のiPad（ipad1、ios 5.1.1）では、上記とはわずかに異なる数値が得られました。おそらくタブとブックマークバーが表示されているためです。
私の値：

縦：768 x 900 
横：1024 x 644

そこで、私はJavaScriptブックマークレットを作成して、確実な肯定的な結果を得ました。これを自分宛にメールで送信し、サファリで「about：blank」に移動し、ブックマークを作成し、編集して、このコードをメールから切り取り/貼り付けできます。

ブックマークレットを実行したら、ウィンドウとタダに一致するまでdivのサイズを変更します。

<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>
4
Andy Idsinga

私はまだiPad用のコーディングを開始していませんが、グーグルでこれらを入手しました。役に立つかもしれません
https://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/
https://developer.Apple.com/library/content/technotes/tn2010/tn2262/_index.html

2
zapping

Andy Idsingaの回答を編集して、どこでもアップロードしてデバイスで実行できるHTMLドキュメントを作成しました。ビューポートメタタグを修正し、画面の回転時に自動再読み込みを設定しました。また、w + 10、w-10、h + 10、h-10ボタンを追加しました。彼が元の作者だったので、これが好きなら、アンディも賛成してください！

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

上記の答えは間違っています。 iPadのヘッダーの実際のサイズは64pxです。したがって、iPadの縦向きの場合= 768X960および横向きの場合= 1024x704また、ヘッダーの高さを64pxとして含む縦向きおよび横向きのiPadの合計寸法を確認すると、縦および横向きが768x1024として表示されます

1
Deepak Rawat

上記の「正しい」答えは、時間、バッテリー寿命などを示すiPad画面上部の黒いステータスバーを考慮していないため、実際は間違っています。これは、18ピクセルの余分な画面です。

したがって、Safariで使用できる画面領域は、実際には次のとおりです。横：1024x672縦：768x928

0
iamalismith

ビューポートの現在の寸法を表示するには、 http://benfrain.com/downloads/respond.html をチェックするだけです。

または、このブックマークレットをさらに使いましょう： http://lab.maltewassermann.com/viewport-resizer/ これにより、あらゆる種類のデバイスの現在の寸法が表示されます（カスタマイズすることもできます）。すべてのWebサイトでテストできます。

0
Jan