Я разрабатываю веб-приложение для iPad, чтобы работать в Safari. У меня еще нет iPad для тестирования. Кто-нибудь знает размер используемого экрана - после того, как занимает место для элементов управления safari/ipad?
Насколько велика полезная область в iPad Safari
Ответ 1
Вы должны просто следовать TN2262 и написать код, инвариантный к измерениям.
В случае, если вам нужен логический размер пикселя, document.body.client[Width|Height]
всегда 980 × 1208.
С точки зрения абсолютных пикселей, которые вы можете использовать, панель навигации Mobile Safari занимает примерно 78 пикселей, поэтому в портретной ориентации она составляет 768 × 946, а в альбомной ориентации - 1024 × 690.
Также может быть клавиатура (308 пикселей в вертикальной ориентации, 397 пикселей в альбомной).
Обновление: приведенные выше абсолютные значения верны только для iOS 4.x или ранее. В iOS 5.x Apple представила панель вкладок, которая увеличивает высоту панели навигации + строки состояния до 96 пикселей. На самом деле, даже до iOS 5.x наличие панели закладок также может влиять на область просмотра.
Ответ 2
Если вы хотите узнать аспекты экрана, вы можете проверить iPad Peek и загрузить сайт, например NYTIMES. это дает точные размеры экрана для iPad.
Надеюсь, что это поможет
Ответ 3
Итак - на моем ipad (ipad1, ios 5.1.1) я получил несколько разные числа, чем указано выше. Возможно, потому, что отображаются вкладки и закладки.
Мои ценности:
portrait : 768 x 900 landscape : 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
Я еще не начал кодировать для 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-документ, который вы можете загружать в любом месте и запускать на своих устройствах. Я скорректировал метатаг viewport и установил автоматическую перезагрузку при вращении экрана. Я также добавил кнопки 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>
Ответ 6
Вышеуказанные ответы неверны. Фактический размер заголовка ipad равен 64px. Поэтому в портретной ориентации ipad = 768X960, а ориентация ландшафта = 1024x704 Вы также можете проверить общий размер ipad в портретной и альбомной ориентации, включая высоту заголовка, как 64px, тогда он будет показывать портретную и альбомную ориентацию как 768x1024
Ответ 7
Вышеупомянутый "правильный" ответ на самом деле ошибочен, так как он не учитывает черную строку состояния в верхней части экрана ipad, показывающую время, время работы от батареи и т.д. Это дополнительный 18 пикселей экрана, который взят.
Таким образом, полезная площадь экрана в Safari на самом деле: пейзаж: 1024x672 портрет: 768x928
Ответ 8
Просто просмотрите http://benfrain.com/downloads/respond.html, чтобы просмотреть текущие размеры области просмотра.
Или даже лучше использовать этот букмарклет: http://lab.maltewassermann.com/viewport-resizer/ Это покажет текущие размеры для всех устройств (также можно настроить). Может быть протестирован на каждом веб-сайте.