Подойдёт ли iPad для отладки вёрстки сайтов под iOS? — Хабр Q&A

Не следует перехватывать событие прикосновения для крупных блоков, способных занять весь экран

так как это помешает масштабированию как 2 пальцами, так и двойным прикосновением (эти события будут перехвачены и обработаны не как масштабирование)

Основной проблемой же на том сайте было даже не это… Там использовались блоки с фиксированным позиционированием, которое не приемлемо при верстке под мобильные устройства.

Что удобнее в работе с ipad для программиста?

Первое, чем iPad удобнее ноутбука — это портативностью. Да, ноутбуки и сами по себе являются портативными компьютерами, однако планшет — это ещё более легкое, компактное, и нетребовательное к вашему рабочему пространству устройство.

Будучи часто в разъездах, мне приходилось постоянно таскать с собой ноутбук в рюкзаке. «Велика беда», можете иронично сказать вы, однако не забывайте про обязательный увесистый блок питания к ноутбукам. Тем более у модели MacBook Pro 13” mid 2021, которая постепенно уходит в историю. И чем больше вам нужно мощности ноутбука, тем массивнее блок питания с ним нужно будет возить.

Таким образом, если вы предпочитаете, путешествовать налегке и работать хоть с песчаного пляжа на Бали, то дополнительные ~3 кг будут создавать вам неудобства. С планшетом же всё куда проще: достаточно закинуть небольшой чехол с iPad и Apple Pencil в рюкзак.

Что можно разрабатывать на ipad?

На iPad отсутствуют полноценные среды разработки для многих популярных языков программирования, что сильно ограничивает сферу его применения для разработчиков.

Например, если вы давно мечтаете научиться программировать на Swift и начать создавать свои приложения под iOS, iPad может стать для вас лучшим помощником в этом. Официальное обучающее приложение Swift Playgrounds шаг за шагом проведёт от самых азов до своего первого собственного приложения, даже если до этого вы никогда не имели дела с программированием.

Если ваш процесс разработки не требует визуального интерфейса, то iPad может вполне подойти для вашей задачи. К примеру, я перешёл на планшет во время работы над игрой Wasteland Wars, которая представляет собой онлайн игру в формате чат-бота. Для работы над моей игрой iPad подходит для такой разработки просто идеально:

• главный процесс разработки таких текстовых игр заключается в написании и загрузке кода с графикой на сервер, где уже происходит вся машинная работа;
• сам процесс разработки и отладки кода игры не предусматривает потребности работы с графической частью;
• графику лично мне удобнее создавать с Apple Pencil.

10 обязательных приложений ipad для дизайнеров

Нельзя использовать фиксированное позиционирование блоков или фона

последнее следствие того, что экран мобильного устройства значтельно меньше и для чтения применяется масштабирование, а фиксированные блоки принимают облость обзора под «экран», пытаясь на нем разместиться.

И последняя особенность, которую хочу отметить —

Отсутствие события scroll

Это происходит вследствие того, что страница отображается как бы «полностью», а мы просто перемещаем «экран обзора» или вроде того, суть в том что событие scroll на мобильных устройствах не вызывается. А следовательно его использовать нельзя.

Дольше всего пришлось проводиться с увеличением масштаба при повороте iPad. После поворота iPad из горизонтального в вертикальное положение, увеличивался масштаб, что смотрелось некорректно. А решается это очень просто:

Вместо 1000 следует указать размер блока для отображения. Например, если у вас блог с фиксированной шириной 720px, то вам следует заменить 1000 на 720. =)

И пара полезных «фишек» для подобных устройств:

внутренний скроллинг блоков (нужно учитывать 2 и 3)

function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
function touchScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollTop event.touches[0].pageY;
event.preventDefault();
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;
event.preventDefault();
},false);
}
}

Проверка устройства, не iPad ли это:

Css заготовка для адаптивной верстки под apple ipad

/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
}

Верстка на ipad « блог веб-разработчика

Планшет по возможностям не уступает пк?

Все возможности iPad заключаются в приложениях, которые вы используете на нем.

По большей части, я использую в работе язык Python 3.6 и прекрасную IDE для него — Pythonista. Кстати, она доступна в AppStore. Эта среда разработки предоставляет мне возможности полноценных десктопных редакторов:

• я могу создавать код на планшете и сразу же видеть результат его работы;
• в любой момент можно подключить сторонние библиотеки;
• встроенный в приложение терминал позволяет даже запускать простые веб-сервера прямо на планшете.

Работаю с кодом в Pythonista

Для создания графики я использую целый набор различных приложений, каждое из которых лучше в разных аспектах. Procreate и Autodesk Sketchbook — мои личные фавориты в удобном создании и редактировании растровой графики.

Рисую маску в Procreate

В создании векторной графики все мои потребности полностью покрывают пара крутейших инструментов — Vectornator для детальной разработки графики любой сложности с нуля, и Assembly для быстрого и удобного создания артов, логотипов и иконок.

Управление сервером я веду через протокол SSH, используя для этого клиент Termius. Как я заметил, premium версия этого приложения даёт множество преимуществ, которые могут сохранить вам нервы и крепкий сон по ночам, но для базовой работы совсем не обязательна.

Для работы с файлами на сервере удобнее всего для меня оказался FTP Manager Pro, который позволяет перемещать Файлы с локального хранилища iPad простым перетаскиванием с помощью Drag & Drop.

Split View с FTP Manager Pro — идеальное сочетание

В совокупности всего перечисленного с удобством и скоростью работы, для меня iPad предоставляет даже больше возможностей в работе, чем ПК или ноутбук.

Подойдёт ли ipad для отладки вёрстки сайтов под ios?

Продолжительность работы ipad от батареи

В iPad ещё с самого первого устройства Apple задала планку в 10 часов работы от одного заряда, которую до сих пор не могут достичь планшеты на Android, а приблизиться к этой цифре смогли разве что Windows-планшеты на базе Intel с мобильными х86 процессорами.

Эта цифра — мощный аргумент в сторону планшета. Несмотря на то, что ноутбуки Apple сейчас вне конкуренции по времени работы, даже они проработают не более 5-и часов под активной нагрузкой при программировании и отладке, то есть вдвое меньше чем iPad.

Важное уточнение: всё описанное выше — мой личный опыт работы с iPad Pro 10.5 и MacBook Pro 13” mid 2021, он может и будет не совпадать с вашим.

Только вы создаёте свою уникальную рабочую площадку для ваших собственных целей. Я надеюсь, что вы нашли в моем опыте что-то полезное для себя!

Разработка и администрирование веб-ресурсов на ipad

У меня не получилось найти универсальный и подходящий мне инструмент для веб-разработки, верстки страниц с использованием JavaScript и CSS, с просмотром изменений в Split View, но для создания несложных прототипов могут подойти и универсальные редакторы кода вроде Buffer.

Возможность администрировать сайты с планшета зависит только от структуры самих сайтов. Если есть удобная админ-панель, или даже отдельное приложение для работы с движком сайта типа, WordPress, то наполнение сайта контентом с iPad не должно доставить вам слишком много неудобств.