Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core
В настоящее время нас все больше окружают различные мобильные устройства - смартфоны, планшеты, другие гаджеты. И уже не проблема, пребывая к какой-либо точке земного шара, охваченной мобильными сетями, через мобильные устройства выйти в интернет. Уже сейчас, по некоторым оценкам, количество пользователей смартфонов приближается к 1 млрд. человек. Это несет новые возможности по развитию бизнеса, продвижению информационных услуг и т.д. Все это привело развитию веб-сайтов для мобильных устройств.
На заре распространения мобильных телефонов уже существовала веб-разработка для подобных устройств. Например, мы могли по протоколу WAP получать доступ к специальным wap-сайтам, которые были написаны на языке wml:
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml" >
<wml>
<card id="main" title="WapSite">
<p mode="wrap">Простейшая страница на языке WML.</p>
</card>
</wml>
Сейчас мобильные телефоны представляют куда большие возможности по получению и отображению содержимого сайтов, а в написании подобных сайтов используется те же HTML/CSS/JavaScript.
Как же создать сайт для мобильных устройств? И чем отличаются сайты для мобильных устройств от традиционных сайтов?
С одной стороны, оба вида сайтов ни чем не отличаются - и там, и там используется разметка html. Более того мы можем создать один единственный сайт для десктопных компьютеров и смартфонов.
Но с другой стороны, размеры мобильных устройств диктуют нам некоторые ограничения, которые мы вынуждены учитывать. В частности, размеры устройств.
Также при разработке обычных сайтов мы нередко сталкиваемся, что те или иные вещи в разных браузерах отображаются по-разному, где-то поддерживается такой стандарт, а где-то нет. С тем же самым нам придется столкнуться и при разработке мобильных сайтов.
Для тестирования мобильных приложений конечно же в идеале лучше использовать сами мобильные устройства. Однако мало у кого есть весь спектр мобильных устройств, да и просмотр на смартфоне приложений, размещенных на локальном веб-сервер, было бы проблематично. Поэтому лучше использовать эмуляторы мобильных устройств или мобильных браузеров. Небольшой список подобных эмуляторов можно найти по следующему адресу: https://www.mobilexweb.com/emulators.
Лично я предпочитаю использовать эмулятор браузера Opera Mobile, который можно найти по адресу: https://www.opera.com/ru/developer/mobile-emulator
Не существует каких-то жестких правил по созданию мобильного сайта, за исключением использования метатега viewport, о котором речь пойдет чуть ниже. Но можно дать несколько рекомендаций общего характера, которые могут помочь при создании мобильного веб-приложения. Например:
Старайтесь избегать фиксированных размеров, отступов, границ, чтобы общая верстка была в духе так называемого "резинового дизайна"
Старайтесь не использовать таблицы. Либо желательно, чтобы таблицы имели как можно меньше столбцов (а в идеале вообще один столбец), а их содержимое было кратким. Рекомендуется использовать списки вместо таблиц.
Избегайте использования фреймов на странице
Старайтесь использовать небольшие формы с минимальным количеством полей
Избегайте использования блоков с прокруткой, как горизонтальной, так и вертикальной, поскольку многие устройства испытывают проблемы с рендерингом прокрутки
Оптимизируйте страницы веб-сайта: сжимайте изображения, оптимизируйте верстку и контент. Избегайте тяжеловесных веб-страниц. Ведь скорость передачи в мобильных сетях в большинстве случаев далека от скорости, например, при проводном подключении. А аппаратные возможности мобильных аппаратов зачастую отстают от возможностей ПК, что будет влиять на скорость обработки веб-страницы.
Говоря о мобильных сайтах, нельзя не затронуть тему энергоэффективности. При создании обычных сайтов нам, как правило, даже в голову не приходит думать об энергоэффективности. Однако, мобильные устройства имеют свои ограничения, и одно из них (особенно на моделях с ОС Андроид) - это запас батареи.
По некоторым подсчетам, парсинг библиотеки jQuery на некоторых устройствах может потреблять до 0,01% заряда полностью заряженной батареи. Возможно, цифра не самая большая, но учитывая, что современные сайты содержат множество нагруженных скриптов, а также стилей, картинок, да и вряд ли пользователи посещают только один сайт. С учетом всего этого вопрос энергоэффективности становится более актуальным.
Как же сделать сайт более энергоэффективным? Во-первых, необходимо использовать только те скрипты, которые действительно нужны веб-сайту. Даже не используемый код JavaScript будет уменьшать заряд батареи.
То же самое относится и к использованию стилей. Загрузка большого количества определения стилей, которое не используется, отнимает также заряда батареи.
Если у вас стоит выбор, что делать: один сайт, для всех устройств с оптимизацией под мобильные устройства, либо два сайта - по одному для ПК и для мобильных устройств, то второй вариант будет выглядеть предпочтительнее. Поскольку в этом случае мобильный аналог сайта будет загружать только предназначенные скрипты и стили, соответственно экономя энергию за счет отсутствия неиспользуемого кода.
Теперь же перейдем непосредственно к ключевому моменту в разработке мобильных приложений - метатегу viewport.