Как верстать на планшете

Обновлено: 07.07.2024

Дисклаймер: материал был написан до того, как адаптивная верстка стала трендом.

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

Взял верстку с ходу. Верстал всё в процентах. Но при отображении в мобильном устройстве (Android и IOs) верстка выглядела немного странно. Больше всего раздражал маленький размер шрифта текста для абзацев. Отсюда и возникла идея написания этого совета. Итак, разберем всё по частям и найдем самое оптимальное решение, чтобы не выглядело как «на костылях».

Итак, для верстки нам потребуются следующие элементы:

Общее понимание разрешений мобильных устройств.
Задание размера viewport.
СSSи MediaQuery.

Общее понимание разрешений мобильных устройств

Да, это именно так. Яндекс выдает нам множество вариантов. Становится ясно, что разрешений очень много. Верстать под все разрешения нет возможности.

Почти все браузеры, которые есть на мобильных устройствах, могут и используют ресайз страниц. Ресайз они делают на основе технических данных, получаемых от устройства. Их три:

devicePixelRatio
screen.width
screen.height

Эти три параметра могут дать нам море информации. Пишем простую функцию:

Например на Iphone мы увидим «2 320 568 640 1136», на айпад «2 768 1024 1536 2048». Lenovo P780 cообщит «1,5 360 640 540 960». Т.е. ширины экранов у перечисленных устройств будут 640, 1536, 540 пикселей соответственно. Делаем выводы: нам надо сделать версию для экранов, например, меньше 986 пикселей (стандарт для узких мониторов). Образно говоря, будет две верстки. Одна для экранов с разрешением более 986 пикселей, другая — для меньших. Особенности CSS-верстки будут описаны в последнем разделе.

Задание размера viewport

О viewport можно найти в поиске много мусора. Почти везде идет ширпотреб без объяснения логики. На самом деле тут всё очень просто:

Вьюпорт (viewport) — это видимая часть окна браузера (мобильного или десктопного).

Размер вьюпорта можно менять, используя следующую конструкцию в head:

Для верстки используем только два параметра width и user-scalable. Первым задаем размер видимой части, второй разрешает ее увеличивать (применять zoom двумя пальцами).

Обозначив width=device-width, мы сообщаем браузеру, что нам нужна область просмотра контента, равная ширине экрана мобильного устройства.

Можно вручную задать значение для width. Например content="width=600", но этого не рекомендуем, потому-что различные носимые устройства могут иметь абсолютно различную ширину экрана.

Более подробно про viewport можно прочитать в статье «Адаптация сайта на мобильных устройствах».

СSS и MediaQuery в мобильной верстке

MediaQuery разжевано на множестве сайтов, уделять внимание описанию не будем. Лишь опишем ряд проблем в виде маленького ЧАВО.

Какой диапазон выбрать для MediaQuery при адаптивной верстке?

В работе мы использует три брекпоинта для носимых устройств: 1024px, 800px, 420px. Это рекомендация, вы можете спокойно добавить свои.

Мелкий текст в адаптивной/мобильной верстке сайта.

Решение: стоит увеличить размер шрифта в соответствии с devicePixelRatio или просто в 1,5 раза. Например, так:

Изменяется размер шрифта при смене ориентации/вращении мобильного устройства.

Гироскопом уже никого не удивишь, его ставят китайцы даже в самые дешевые смартфоны. Удивить можно верстальщика. Решение:

Сбрасываем форматирование для элементов форм

Каждый браузер должен, нет, просто обязан быть уникальным. Исправляем косяк с различным форматированием элементов форм, отменяя дефолтные стили браузера. А уже дальше делаем, как на душе лежит.

Safari в IOs увеличивает шрифты в верстке

Mobile Safari в Ios (а также Chrome для Android, Mobile Firefox и IE Mobile) автоматически увеличивают размер шрифта внутри широких блоков. Это можно пофиксить двумя строчками CSS:

На данный момент адаптирую одно из имеющихся приложений под 7' и 8/10', поэтому буду максимально краток.

*для удобства и наглядности все изображения склеил (телефон и планшет)

Примерно так выглядит экран приложения, который не адаптирован под размер планшета. Коротко говоря - все растянуто. У меня еще не так все плохо, и это уже радует.

Перво наперво хотелось бы начать с того, что устройств и диагоналей для нашей платформы существует нереальное количество (over 15.000 устройств). Это минус, так как приходится адаптировать приложение как под маленькие устройства, так и под ~~лопаты~~ планшеты.

Гугл же по вопросу адаптации под плашеты, тв, ~~и чайники~~ советует компоновать экраны, и использовать фрагменты:

- Маленький экран, вертикальная ориентация: однопанельный вид с логотипом.

- Маленький экран, горизонтальная ориентация: однопанельный вид с логотипом.

- Планшетный ПК с 7-дюймовым экраном, вертикальная ориентация: однопанельный вид с панелью действий.

- Планшетный ПК с 7-дюймовым экраном, горизонтальная ориентация: двухпанельный вид с панелью действий.

- Планшетный ПК с 10-дюймовым экраном, вертикальная ориентация: двухпанельный вид (узкий вариант) с панелью действий.

- Планшетный ПК с 10-дюймовым экраном, горизонтальная ориентация: двухпанельный вид (широкий вариант) с панелью действий.

- Телевизор, горизонтальная ориентация: двухпанельный вид с панелью действий.

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

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

Итак, открываем студию, к примеру у нас имеется готовый слой для одного экрана телефона (как выше). Создаем точно такой же файл (название идентичное).

Теперь во всплывающем окне мы перетаскиваем параметр Orientation, и назначаем ему Landscape. Отдельно я подчеркнул название, указываем точно такое же как основное.

Теперь в дереве проекта у нас появится такой же файл, но с припиской -land . В моем случае слой уже работает только для 7' планшетов (sw600dp) и только для повернутого экрана (-land).

Что дальше? Следующим шагом необходимо полностью скопировать содержание старого слоя в новый.

Теперь мы сделали разметку для портретного режима. Что будем меняем? Меняем в основном сетку и представление.

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

Впринципи это не сложно, но занимает много времени. В одном их фрагментов у меня статический контент (список категорий), поэтому процесс может занять некоторое время. Например с динамически подгружаемыми списками проще.

Теперь если внешний вид окна в вертикальном режиме выглядел так (шрифт в TabLayout еще не увеличен):

То для горизонтального уже был переписан (можете использовать TableRow или Linear Layout) в соответствии с нашими нуждами:

При этом я забыл упомянуть, что на изменяемых слоях ни в коем случае нельзя ни удалять элементы, менять идентификаторы или что то в таком духе. Иначе получим крах приложения. Только внешний вид.

Мы разобрались с горизонтальным режимом. А как создать макет вертикальной ориентации для планшета? Очень просто. Заходим в папку нашего проекта:

И создаем новую папку layout-sw600dp

В нее будет необходимо перекинуть те файлы (слои), которые вы будете адаптировать для планшетов. Принцип работы тот же, что описан выше.

Параметр в названии папки sw600dp работает для планшетов с минимальной высотой 600px (например 1024х600).

Для планшетов на 10 дюймов используйте папку res/layout-sw720dp

Вот вроде и все. Если я что то пропустил, не стесняйтесь спросить в комментариях.

Напоследок фото моего котопса:

Android Developers

60 постов 1.8K подписчика

Правила сообщества

Давайте адекватно относиться к тематике сообщества. Посты, не удовлетворяющие требованиям канала, будут отклоняться. Разработка под Android - это не только описание того, что надо сделать

(освоить Java / покормить кота / установить студию), но и реальные примеры того, что Вы описываете.

Яндекс погода

Никогда особо не парился по поводу памяти в телефоне, но тут решил посмотреть список приложений с фильтрацией по размеру.

Спотифай - ладно, слушаем с женой музыку, сохраняем, один общий плейлист в машине.

2ГИС - многовато для приложения, использующего векторную графику для построения карт без фото-подложки как у Яндекс карт к примеру, но тоже ладно, москва+глобальная карта в любом случае сейчас+еще пара регионов и по ним путеводители с фоточками имеются, так что простительно.

Вконтакте - тоже все понятно, это уже целый комбайн с мини приложениями, огромным функционалом, музыкой и тонной контента.

Но вот Яндекс погода? Какого хрена? Единственное назначение этого приложения - это небольшой виджет на экране который дает мне немного информации. Ладно там есть еще карта осадков на макетной подложке. И всё.

Лучше один раз увидеть

Протестировал, проверил вроде всё что можно. ))

Сегодня пишет пользователь - "при вводе данных - приложение выбрасывает".

Ок, опять тестирую, проверяю на разных телефонах - работает.

По логам - чисто.

Присылают видео - действительно выбрасывает.

И тут, пригляделся внимательнее.

Пользователь вводит число заканчивающееся на ноль, промахивается и нажимает на кнопку сворачивающее приложение.

Уфффф. Расследование окончено. :)

Автономность

Нужен ещё параметр для учёта температуры на улице

Войти в айти. Часть 5

Привет, Пикабу! Да, да.. это очередной пикабушник с кризисом среднего возраста, который вдруг осознал и понял, что с детства мечтал быть программистом. Давненько не было отчёта о моём пути в профессиональный мир разработки. Если вдруг Вам интересен мой опыт, то предыдущие срезы тут:

Вкратце, с чего всё начиналось:

0) Увольнение с военной службы по контракту

2) Высшее образование (заочное) по направлению "Информатика и вычислительная техника"

3) Выучил Java, сейчас изучаю Kotlin и Swift

4) Есть несколько карманных проектов в Play Market, всё довольно простенькое, но стараюсь развивать

5) Женат, детей нет, кот есть

6) В it не работал

Цель - к декабрю 2020 набрать в сумме 1.000.000 загрузок на Android, выучить Swift и выпустить приложение на ios.

Первый пост был написан 10 месяцев назад, в котором я ставил себе рубеж - декабрь 2020. Но не дотянув 2 месяца я схожу с дистанции. Причина этому довольно меркантильная, но приятная - пора устроиться на работу, нужны деньги так как ждём пополнения.

Давайте подведу итоги того, что я имею на данный момент:

- Выучен язык программирования и технологии, позволяющие писать под Android всё, что приходит в голову. Ограничен только временем. На любой вопрос уже есть ответ, стоит только почитать, поэкспериментировать, вникнуть.

- На создании собственных приложений жить можно. Деньги не большие, но на жкх и холодильник хватает. Доход постоянно растёт, если не останавливаться, создавать что-то новое и поддерживать старое.

- Физкультура важна не менее умных книг. Мало движения - тает мотивация, появляется прокрастинация.

- 1.000.000 загрузок набрать не удалось. Цифры гораздо скромнее. На данный момент в сумме загрузок около 240.000, активных пользователей в сумме по приложениям около 83.000

- если из 100 скачавших приложение человек 30 не удаляют его, то это вполне хороший показатель, значит его можно и нужно развивать!

- гайды создания интерфейсов не всегда работают. Порой плюнув на рекомендации корпораций можно сделать что-то, что "зайдёт" людям.

- после 30 на работу в it устроиться можно!

В последнем своём приложении я собрал весь накопленный опыт и понял, что теперь не стыдно рискнуть пройти собеседование. Казалось бы, всего лишь блокнот. Но мне так понравилось работать над деталями, и пробовать новые технологии при работе над ним, что я могу говорить теперь об этом часами. Оказывается, что к созданной тобой программе можно испытывать чувства привязанности и симпатии, что-то вроде любви к своему питомцу. Странно это=)

Результаты по Android меня вполне удовлетворили, чего не сказать о ios. Времени и сил не хватило на всё, буду заниматься им в рамках общего развития. Надеюсь что к весне смогу сделать что-то простенькое.

Если мечтаете сменить род деятельности, выделите время, составьте план, определите сроки и вперёд! Другой жизни не будет, а занятие любимым делом профессионально - это очень, очень круто!

Русская азбука Mорзе для Андроид

Впечатлившись произведениями Павла Кучера решил изучить морзянку.

Да и вообще морзянка всегда может пригодиться, например можно гудком автомобиля сказать пешеходу, что про него думаешь. Или подсказать кому то правильный ответ морганием глаз или пожатием руки или покашливанием.

Нашёл неплохие программы по изучению для PC. Но за компьютер лишний раз сесть некогда и стал искать, что есть под андроид для обучения русской азбуке морзе. Выяснилось, что нет ничего. Т.е. что-то якобы есть, но по факту это оказывались или трейнеры для отработки того, что уже умеешь или справочники или что то типа превратим ваш текст в морзянку.

Я не программист, но пробовал как то писать на Яве под андроид программку для своих детей для обучения математике и игре в математику. И вроде получилось. Ну думаю попробую и тут написать, дело то нехитрое. Оказалось, что дело очень даже хитрое, ибо эта Ява под андроид не умела даже то, что делал мой ZX Spectrum в прошлом веке. Там можно было задать частоту звука и его длительность и наслаждаться прослушиванием. Тут же для получения нужного звука приходилось программировать по точкам синусоиду с которой будет колебаться динамик устройства.

В общем думал справлюсь за несколько вечеров, но шли дни, недели, месяцы. Программа рождалась в муках, справочного материала на Яве под Андроид на русском ничтожно мало, на форумах помогают плохо. И повторюсь, что я вообще не программист. В итоге, когда доделал, то понял, что программке пропадать грех, ибо аналогов то нет. Решил уж потратить ещё несколько вечеров на оформление и выкладывание для всеобщего использования на Google Play и 4PDA.

Программа полностью бесплатна и не содержит рекламы.

Поэтапное изучение знаков азбуки Морзе на приём и на передачу по методике близкой к методике ДОСААФ СССР. Приложение можно использовать и в качестве игры из двадцати уровней с увеличивающейся сложностью.

После прохождения десяти уроков останется не только удовлетворение от пройденного, но и базовый опыт приёма и передачи букв и цифр посредством азбуки Морзе. Воспользовавшись режимом тренировка можно будет отработать приём и передачу отдельных символов до автоматизма.

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

Приложение активно скачивается, почти 65 тысяч установок. В основном людям нравится. Правде не все андроид устройства одинаково полезны. На некоторых есть проблемы на "приём", у Явы есть особенности проигрывания звуков. Так, что у кого не пойдёт - не обижайтесь. Буду не против, если кто-то возьмёт за основу и перепишет программу профессионально.

Редактор Вебмастера Lite

Этот достаточно простой редактор, поддерживающий не только HTML-файлы, но и JavaScript, CSS, PHP. Здесь вы не найдете каких-то интересных возможностей, зато базовые вещи здесь реализованы невероятно качественно. Среди них такие простые радости жизни, как подсветка синтаксиса, нумерация строк, удобный проводник и кнопки быстрого доступа. Кроме того, Редактор Вебмастера Lite поддерживает доступ к файлам FTP.

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

AWD — сокращение от Android Web Developer, и это уже куда более мощный продукт. Помимо стандартных JavaScript, CSS, PHP, HTML, он поддерживает JSON, а также позволяет управлять проектами на FTP, FTPS, SFTP и WebDAV.

Здесь также есть подсветка синтаксиса, автодополнение кода, нумерация строк, функция просмотра, поиск и замена функций, автосохранение, интеграция с Git, разного рода форматирование текста и многое другое.

Здесь вы можете скачать это приложение.

DroidEdit

Платная версия обойдется вам всего в 149 рублей, но если вам действительно приходится часто кодить на ходу — это сущие мелочи. В качестве бонуса за щедрость вы также получите доступ к Dropbox и Google Drive, таким образом сможете напрямую сохранять свои проекты в облако.

Но если вам это не надо, можно и скачать бесплатную версию. Прямо отсюда.

Quoda Code Editor

К сожалению, как и в случае с DroidEdit, полная версия стоит денег — 225 рублей. Но и ограниченная версия должна вам очень понравиться.

Jota Text Editor

Ну а если вам надоели все эти навороченные редакторы кода, то вот вам простой и мощный инструмент для работы с HTML (и не только). Около 5 миллионов скачиваний и рейтинг, близкий к максимальному, наглядно демонстрируют качество работы с Jota Text Editor. За нулевые вложения вы получаете элементарный редактор, способный лишь определять и подсвечивать синтаксис, а также ограничение в миллион символов. Но надо ли вам больше?

Если нет, то тогда устанавливайте Jota.

Еще одна аббревиатура в названии (AIDE — Android Integrated Development Environment), скрывающая большие возможности разработки. Это некое руководство по созданию приложений для Android, от мобильных до игровых. При этом, это не просто собрание лекций и видео, а полноценный редактор с возможностями отладки, верификации и тестирования.

Приложение полностью совместимо с такими привычными инструментами разработки, как Eclipse и Android Studio, поэтому вы не потратите ни секунды драгоценного времени для перехода с мобильной версии на полноценное рабочее место.

Главное, не забыть скачать себе на мобильное устройство AIDE.

anWriter

Закончим рейтинг бесплатным HTML-редактором с поддержкой CSS, JavaScript и Latex. Это в бесплатной версии. Если заплатите 210 рублей, получите также поддержку PHP и SQL. Кроме того, в комплекте вы найдёте совместимость с HTML 5, CSS 3, jQuery, Bootstrap и Angular, возможности работы с FTP и Google Drive.

Возможно ли эффективно программировать на планшете? Какой планшет лучше подойдёт для таких целей? Эта тема не пропускается ни на одном толковом компьютерном форуме. И взгляды у всех разные, и вроде все специалисты, но найти общего решения так и не получилось. Действительно, программирование – отрасль весьма многозадачная, методы и способы в которой разные. Давайте немного разберёмся.

Можно ли программировать на планшете?

Можно ли программировать на планшете? Конечно, да! Но гаджет должен подходить для таких целей. Всё зависит от базы, которую использует специалист. Так, для обычной вёрстки нужен, как минимум, локальный сервер, для запуска которого подойдут Windows 7-8 и Linux, но не iOS, естественно. Есть великие умы, которые делают из любого планшета для себя рабочий инструмент, но в данном случае будем говорить о готовых решениях. Если брать что-то выше вёрстки, то иногда хватит обычного Android-планшетника, но во многих случаях потребуется полнофункциональное устройство, работающее на уровне полноценного ПК. Давайте добавим сюда ещё и дизайн. Потребуется, как минимум Photoshop + некоторые инструменты, работающие только на Windows. Не нужно думать, что планшет обязательно должен быть на этой операционной системе; просто, если говорить про универсальное программирование на планшете, то на базе платформы Microsoft осуществить это пока лучше всего.

Зачем нужен планшет для программирования?

На самом деле программировать при помощи персонального компьютера или ноутбука действительно намного проще. Даже на нетбуках программист испытывает некоторое затруднение, связанные с меньшими размерами клавиш. Правда, ко всему можно привыкнуть, даже к сенсорной клавиатуре.

Зачем нужен планшет? Чаще всего специалисты покупают себе планшет для программирования, если часто находятся вне своего постоянного рабочего места или, например, если приходится много ездить. В транспорте просто открыть свой ноутбук иногда весьма затруднительно. Причин может быть много. Таким образом планшет превосходит своих конкурентов по мобильности и комфорту.

Ещё одну галочку в пользу планшетов можно поставить, если рассмотреть планшет для системного администратора. Все знают, что рабочий инструмент должен находится всегда под рукой. Это намного упрощает рабочий процесс любого системотехника. Важно, на крайний случай, хотя бы иметь к нему доступ. А если взять большую организацию с несколькими корпусами, в каждом из которых у юзеров что-то не получается? Имея под рукой планшет, можно намного упростить себе жизнь. Настроить доступы, дать права, поставить удалённый менеджер на свой основной компьютер и всё!

Процесс или как быть с клавиатурой

Да, если человек пишет очень много кода, а не просто поправляет его или производит настройки, то клавиатура важна. И будет не сильно приятно носить с собой планшет для мобильности и клавиатуру для удобства. Здесь нужна альтернатива. И она есть. Это планшеты-трансформеры и гибриды нетбука/планшета. В последних дисплей не отсоединяется, а (в большинстве случаев) просто перекручивается на 360 градусов, образуя подобие планшета.

Наиболее популярные модели для программирования

Ниже представлен перечень планшетов, которые наилучшим образом зарекомендовали себя среди программистов.

Acer Iconia W510-27602G06ASS

10-дюймовый трансформер на Windows 8, оснащённый процессором Intel Atom Z2760 (1.8 ГГц) и 2Gb оперативной памяти. Местом для основного хранилища служит SSD на 64 Gb. Есть Wi-Fi, Bluetooth и кардридер, поддерживающий карты до 64 GB.

Tablet PC Lenovo ThinkPad X201 Tablet

Модель интересна в первую очередь 12-дюймовым дисплеем, на котором доступен перьевой ввод. Разрешение экрана составляет 1280 на 800pxl. А внутри аппарата всё ещё серьёзней. Все процессы возложены на Intel Core i7-620M (2,66 GHz) и 3 Gb оперативной памяти. Не сэкономили разработчики и на мобильном харде, установив 500 Gb. За графику отвечает Intel GMA HD, также есть слот расширения Express Card для других устройств. Платформа - Windows 7 Professional. На устройстве есть 3 USB порта, VGA, Ethernet и кардридер. Для коммуникаций предусмотрены только Wi-Fi и Bluetooth.

Tablet PC Acer Aspire 1825PTZ-412G32n

Немного попроще модель с процессором Intel Pentium SU4100 (1,3 GHz) и двумя гигабайтами оперативки. 1366 на 768 px уложили на 11,6-дюймовый дисплей. Платформа - Windows 7 Home Premium. За графику отвечает Intel GMA X4500, жёсткий диск на 320 гигов. Из основных портов имеются 3 USB и HDMI. Есть кардридер и Ethernet. Из коммуникации есть только WI-Fi и Bluetooth.

Читайте также: