З кожным годам расце колькасць людзей, якія актыўна выкарыстоўваюць мабільны інтэрнэт на сваіх смартфонах. А дысплей смартфона моцна адрозніваецца ад манітора стацыянарнага ПК або наўтбука ў плане памеру, дазволу і арыентацыі. Адпаведна, пры праглядзе аднаго і таго жа вэб-сайта з ПК і смартфона чалавек будзе бачыць дзве розныя карціны. У першым выпадку гэта будзе прыгожа аформленая і карэктна адлюстроўваецца старонка. У другім выпадку - старонка з залішне дробным шрыфтам і з'ехаў у бок асобнымі блокамі. Аднак у апошні час вэбмайстра ўсё часцей клапоцяцца аб адаптацыі сваіх сайтаў пад мабільныя браўзэры, так як гэта дазволіць утрымаць на старонках рэсурсу «мабільны» трафік.
У першую чаргу, гаворка ідзе аб карэктным запаўненні тэга meta viewport. Ён прапісваецца ў тым жа месцы, дзе знаходзяцца іншыя мета-тэгі старонкі (title, description) - у хедэры. Асноўнае прызначэнне meta viewport - рэгуляцыя шырыні і маштабу старонкі пры выяўленні ў браўзэры. Рэгуляванне гэтых параметраў адбываецца ў залежнасці ад таго, якім дысплеем (па шырыні і дазволу) валодае прылада. Вось прыклад кода з выкарыстаннем мета-тэга meta viewport - <meta name = "viewport» content = "width = device-width; initial-scale = 1.0; maximum-scale = 1.0; ">. Пройдземся па параметрах. Параметры width (шырыня паказваемай вобласці) прысвойваецца значэнне device-width (шырыня дысплея прылады). Параметры initial-scale (пачатковы маштаб) прысвойваецца значэнне 1 (гэта значыць 100%). Параметры maximum-scale (максімальны маштаб) таксама прысвойваецца значэнне 1. Іншымі словамі, задаецца фіксаваны маштаб пры праглядзе. Змесціва тэга meta viewport можна прапісваць напрамую ў каскадных табліцах стыляў.
Таксама для распрацоўкі адаптыўнага дызайну можна выкарыстоўваць спецыфікацыю CSS3 пад назвай Media Queries. Ўстаўляецца яна вельмі лёгка - адразу ў HTML-код старонкі. Да прыкладу, <link href = "style.css» rel = "stylesheet» media = »screen and (orientation: portrait) and (min-width: 1000px), projection» />. Пры дапамозе дадзенай спецыфікацыі можна прапісваць асобныя блокі з CSS-правіламі для дысплеяў з вызначаным дазволам або арыентацыяй (кніжнай або альбомнай). У залежнасці ад характарыстык дысплея, у сілу будзе ўступаць той ці іншы блок. Параметр orientation, як вы зразумелі, задае арыентацыю. Параметр min-width - гэта мінімальная шырыня дысплея (калі ён валодае шырынёй, большай, чым тая, якая пазначана тут, то ў сілу ўступяць пэўныя CSS-правілы).
Наступная прылада, аб якім трэба распавесці - Modernizr. Гэта адмысловы скрыпт, асноўная задача якога - вызначаць, ці падтрымлівае браўзэр карыстальніка новыя стандарты HTML5 і CSS3. Калі падтрымка дадзеных стандартаў адсутнічае, то ў браўзэр загрузіцца спрошчаная і аблегчаная версія сайта. У адваротным выпадку будзе загружацца поўная версія (з усім функцыяналам і з усімі эфектамі). Спампаваць можна адсюль - http://modernizr.com.
Пры дапамозе jQuery-плагіна пад назвай TouchSwipe можна зрабіць свой сайт яшчэ больш прыстасаваным да сэнсарнаму кіраванні. Пасля карэктнай устаноўкі плагіна старонкі вашага рэсурсу без працы будуць распазнаваць усе асноўныя жэсты пальцаў рук (і адпаведным чынам на іх рэагаваць). Да прыкладу, убудова падтрымлівае распазнанне такіх жэстаў, як swap, tap, pinch, zoom, multi touch і г.д. Спампаваць можна адсюль - http://labs.rampinteractive.co.uk/touchSwipe/demos.
Можна нават зрабіць так, каб пры даданні старонкі сайта на хатні экран прылады з'яўлялася спецыяльная абразок ў стылі iOS (карыстальнікі айфонаў і айпад напэўна гэта ацэняць). Для стварэння абразкі варта загадзя падрыхтаваць тры карцінкі - для iPhone, iPad і iPhone Retina. Назавіце карцінкі наступным чынам - touch-icon-iphone.png, touch-icon-iphone-retina.png і touch-icon-ipad.png. Далей загрузіце іх у каранёвай сайта. У хедэры трэба прапісаць наступны код:
<Link href = "touch-icon-iphone.png» rel = »apple-touch-icon» />
<Link href = "touch-icon-ipad.png» rel = »apple-touch-icon» sizes = »72 × 72" />
<Link href = "touch-icon-iphone-retina.png» rel = »apple-touch-icon» sizes = »114 × 114" />.
