Сайн байцгаана уу эрхэм блог уншигчид минь. Галиулин Руслан холбоотой байна. Өнөөдөр бид хайлтын системийн ТОП-д орохын тулд сайт эсвэл блог бүрт байх ёстой сайтуудын гар утасны хувилбаруудын талаар ярих болно. Өгүүлэлд би хэв маягийн кодууд болон компьютер дээрээ татаж авах боломжтой хуудасны бэлэн загваруудын жишээг өгөх болно.

Хэрэв таны сайт гар утсанд тохиромжгүй хэвээр байгаа бол миний зөвлөгөөг ашиглах эсвэл мэргэжлийн хүмүүстэй холбоо барихыг зөвлөж байна. http://www.mobile-version.ruхэн бүх зүйлийг хайлтын системийн стандартын дагуу хийх болно. Та мөн ижил холбоосыг ашиглан сайтынхаа хөдөлгөөнийг шалгаж болно.

2013 ОНД Google жилвэбмастерууд дээр шахалт үзүүлж эхэлсэн ( https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html), вэб сайтын хөнгөн өөрчлөлтийг бий болгох хэрэгцээг ятгаж, 2015 оноос хойш хөдөлгөөнт байдал нь эрэмбийн талуудын нэг болсон ( https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html). Yandex нь Владивостокийн тусгай алгоритмыг бүтээсэн бөгөөд энэ сайтыг утаснаас үзэхэд тохиромжтой эсэхийг харгалзан үздэг.

Өнөөдөр Mobile Friendly бол зочдод анхаарал халамж тавихаас гадна сурталчилгааны зайлшгүй нөхцөл юм.

Сайтыг эхнээс нь үүсгэх үед Mobile First аргыг ашигладаг. Гэхдээ ихэнх нь хуучин ажлын төслүүдтэй. Ийм нөхцөлд сайтын мобайл хувилбарт гарч ирдэг гол асуулт бол одоо байгаа загварыг эвдэхгүйгээр яаж хийх вэ?

Гурван арга байдаг:

• Тусдаа хаяг, байршил - m.site.ru маягтын дэд домайн дээр байрлуулсан. Дахин чиглүүлэлт нь хэрэглэгчийн агентын серверийн дахин чиглүүлэлтээр хийгддэг.
• Хариуцлагатай дизайн - url болон html нь ширээний форматтай ижил хэвээр байгаа боловч CSS дээр медиа асуулга нь өөр өөр дэлгэцийн дүрмийг буцаадаг.
• RESS нь хариу үйлдэл үзүүлэх загвар бөгөөд хаяг нь хэвээр байх боловч сервер нь тухайн хуудаснаас ямар төрлийн техник хангамж хүсч байгаагаас хамааран загварын багцыг илгээдэг.

Хуучин төслүүдийн эздэд зориулсан оновчтой сонголт- дасан зохицох зохион байгуулалтыг ашиглах. Аюулгүй залгаасуудыг ашиглахгүйгээр үүнийг өөрөө хэрхэн хийх талаар бид алхам алхмаар авч үзэх болно.

Сайтын гар утасны хувилбар: үүнийг хэрхэн зөв хийх вэ

Цаашдын алхмууд нь html болон css-ийн үндсэн мэдлэг эсвэл ойлгомжгүй зүйлсийг хурдан Google-ээс хайж олох чадварыг шаарддаг.

Эхлэгчдэд зориулсан мэдээлэл: CSS дээр буржгар хаалтны өмнөх үгс нь харуулах үүрэгтэй html файлын тодорхой хэсгүүдийг илэрхийлдэг. Цэг эсвэл хэш тэмдгээр илүү олон удаа бичдэг - #place (өмч: үнэ цэнэ;).

Алхам 1. Хязгаарлалтуудыг арилгах.

Шингэний байршлын эзэд энэ алхамыг алгасаж болно. Үлдсэн хэсэг нь шаргуу ажиллах хэрэгтэй болно.

Өргөн- Бид хатуу тодорхойлсон дэлгэцтэй кодын том хэсгүүдийг хайж байна. Хэрэв параметрийг пиксел эсвэл цэгээр зааж өгсөн бол та түүний утгыг хувь, ems болон хүрээлэн буй орчинд мэдрэмтгий бусад нэгж болгон өөрчлөх хэрэгтэй. Ихэнхдээ гол сав эсвэл агуулгын талбай нь тогтмол өргөнтэй байдаг - ихэнх тохиолдолд хязгаарлалтыг хамгийн их өргөнөөр солих замаар арилгадаг.

Зураг- тодорхой хэмжээний оронд бид img шошгонд шинж чанаруудыг зааж өгдөг бөгөөд энэ нь зурагт дасан зохицох боломжийг олгоно. Зургууд нь үндсэн контейнер доторх харьцааг өөрчилнө.

img(

Хамгийн их өргөн: 100%

өндөр: автомат;

ширээ- Бүрэн дасан зохицох чадварыг тохируулах боломжгүй, гэхдээ та эдгээр кодыг нэмснээр хөдөлгөөнт төхөөрөмжид тохирох хуудсыг хийж болно:

хүснэгт (

дэлгэц:блок;

Өргөн: 100%;

overflow-x: гүйлгэх;

халих-y: далд;

ms-overflow-style: -ms-autohiding-scrollbar;

webkit-overflow-scrolling: touch;

Wraps - float шинж чанараар тохируулна. Энэ тохиргоог хийснээр цонхны тохиргоонд тулгуурлан хайрцгуудыг хөдөлгөж, тогтвортой байрлалтай эсвэл эх сав доторх элементүүдэд тохируулах боломжтой болно. Стандарт div элементүүдийг анхдагчаар тус бүр рүү хөрвүүлдэг шинэ мөр. Жишээлбэл, 200 px div блокуудыг 1000 пикселийн багтаамжтай саванд хийснээр та энэ зургийг харж болно.

Блокууд нь бие биенийхээ дээр овоолсон байна. Боодол нэмэх нь шинэ мөрүүдийг арилгаж, бүх боломжит зайд элементүүдийг мөрөнд оруулдаг.

Алхам 2: Агуулгыг дахин зохион байгуулах төлөвлөгөө.

Мобайл төхөөрөмж дээр ширээний сайтын ямар мэдээллийг харуулах ёстойг олж мэдээрэй. Үүнийг хийхийн тулд дараах асуултуудад хариулна уу.

• Ямар блокууд зөвхөн гоёл чимэглэлийн функцийг гүйцэтгэдэг вэ? - Ихэнхдээ эдгээр нь гулсагч, хажуугийн чимэглэл, асуулга, санамсаргүй гэрэл зураг юм.
• Зочид юуг үл тоомсорлодог вэ? - Товшилт, замуудын дулааны зураг нь энэ асуултад хариулахад тусална. Бид хамгийн бага идэвхтэй элементүүдийг хэрцгий нуудаг.
• Гар утасны хувилбарт юу үлдэх ёстой вэ? - Ихэвчлэн энэ нь сурталчилгаа, маягт юм санал хүсэлт, захиалга эсвэл олон нийтийн мэдээллийн хэрэгслийн товчлуурууд.
• Сайт нь таблет, ухаалаг гар утас, жижиг хуучин утсан дээр хэрхэн харагдах ёстой талаар бодож үзээрэй - та төхөөрөмж бүрийн дүр төрхийг тохируулж болно.

Алхам 3. Тохиромжтой байдал.

Навигац: утасны дэлгэц хэтэрхий жижиг, сайтын ердийн цэс ийм хүрээтэй таарахгүй. Товчлуур дээр унадаг цэсийг тохируулах нь заншилтай байдаг.

Агуулгын талбар: утасны хувьд дүрмээр бол CSS дахь үндсэн блокийн өргөнийг 100% болгож тохируулна. боломжтой зай. Энэ нь жижиг төхөөрөмжүүд дээр текст, модуль, зар сурталчилгаа, хажуугийн контентыг нэг баганад харуулах болно гэсэн үг юм.

Мэдрэгч: Хуруунууд нь хулгана шиг нарийн биш тул тэдэнд хангалттай зай үлдээ. Холбоос болон бусад идэвхтэй элементүүдийн эргэн тойрон дахь зай хамгийн багадаа 28 x 28 пиксел байх ёстой.

Идэвхтэй орон зайг тодорхойлоход нь зочлогчиддоо туслаарай - дүүргэх, тодруулах, өнгө өөрчлөх болон хүрэхэд тохируулж болох бусад зүйлс, холбоос болон товчлууруудад hover псевдо ангиллыг зааж өгөх.

Хэвлэл мэдээллийн асуулгын жишээг хэрэгжүүлэх

Хэрэв та хэзээ нэгэн цагт хэвлэх зориулалттай CSS хүснэгтүүдийг үүсгэж байсан бол нөхцөл байдлаас шалтгаалан хувь хүний ​​хэв маягийг хуваарилах боломжийн талаар аль хэдийн ойлголттой болсон байна.

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

Медиа асуулгад дараах параметрүүдийг өгч болно.

• хөтөчийн цонхны өргөн ба өндөр;
• төхөөрөмжийн өргөн ба өндөр;
• чиг баримжаа - ландшафт эсвэл хөрөг горим;
• Дэлгэцийн нягтрал.

Аргументуудын хамгийн сүүлийн үеийн жагсаалтыг эндээс авах боломжтой албан ёсны тодорхойлолт.

Жишээнүүд рүү шилжье. Байна бэлэн загвар, түүний агуулгын хэсгийн хэмжээ нь 1000 пиксел бөгөөд бүх дотоод элементүүд болон дэлгэрэнгүй мэдээллийг энэ параметртэй холбогдуулан тохируулсан болно.

Хэрэв хэрэглэгчийн дэлгэц нь заасан агуулгын хэсгээс нарийхан байвал гүйлгэх мөр гарч ирнэ. Хөвөгч дизайны элементүүд нь урьдчилан таамаглах аргагүй байдлаар биеэ авч явах боломжтой - бие биентэйгээ гүйж, тархаж, хэт нарийсдаг.

Юуны өмнө бид туузыг үүсгэдэг тогтмол хэмжээг арилгаж, тохируулга хийхэд саад болохгүй. Манай загварт энэ бол навигацийн боодол юм. Уншигчийн байршилд энэ нь нэг буюу хэд хэдэн элемент байж болно. Хэрэв та тодорхойлолтод алдаатай байгаа бол хөтөчийн хөгжүүлэгч хэрэгслийг нээнэ үү - хайрцагны загвар харагдацыг ашиглан дэлгэцийн хэмжээст тохирохгүй элементийг олоорой.

Үүнийг засахын тулд бид загварын хэв маягт нэмж тогтмол хүрээг устгана:

Зөвхөн @media дэлгэц ба (хамгийн их өргөн: 1000px) (

Nav (өргөн: 100%; )

Хэрэв хэрэглэгчийн дэлгэцийн өргөн нь 1000px-ээс бага бол цэсийн өргөн нь түүний хэмжээтэй 100% тэнцүү байх болно. Загварын үндсэн хувилбар нь өмнөх шигээ харагдаж байна. Өмчийг солих нь дэлгэцийг багасгах үед доод гүйлгэх самбарыг арилгасан.

Гэхдээ блокууд нь эргэлзээтэй хэвээр байна - хүссэн хэмжээстээ тохируулахын тулд өргөнийг хувиар нэмэгдүүлэх замаар тэдгээрийн дэлгэцийг өөрчилье.

Бид ижил медиа хайлтанд нэмнэ:

Блок(өргөн: 35%;)

Сайтынхаа блокуудын оновчтой хэмжээг хэрхэн олох вэ? Гараар тооцоолох эсвэл аль ч бэлэн сүлжээ - шингэн сүлжээг үндэс болгон авах. Та одоо байгаа стандартууд дээр анхаарлаа төвлөрүүлж болно: 980-1050px цонхны өргөнтэй хоёр баганын зохион байгуулалтанд боодол нь 95%, агуулга нь 60%, хажуугийн самбарт 30% үлдсэн байна. Үлдсэн орон зай нь нарийвчлалын үүднээс хил, ирмэгийг бий болгоход чиглэгддэг.

Гэсэн хэдий ч та пикселийг тоолохгүй байхын тулд контентын хэмжээсийг ашиглаж болно, гэхдээ нийт хэмжээсийн дагуу ажиллана.

Дэлгэцийг бага нарийвчлалтай дэлгэцэн дээр тохируулах руу шилжье:

Зөвхөн @media дэлгэц ба (хамгийн их өргөн: 600px) (

Блок (

хөвөх: байхгүй;

Өргөн: 85%;

Маржин: 1 эм автомат;

Хэрэв дэлгэц нь 600 px-ээс бага бол бидний блокууд нэг баганад багтах ёстой - бид боодлыг арилгаж, шинэ догол мөрийг байрлуулж, голчлон өргөнийг нь өөрчилнө. Ихэнхдээ 100% тохируулдаг, гэхдээ ямар нэг шалтгааны улмаас энэ нь тохиромжгүй байвал бид өөрсдийн хэмжээг тохируулдаг.

Тиймээс та зөвхөн агуулгын блокуудын хэмжээсийг төдийгүй тэдгээрийн дэлгэцийг тохируулах боломжтой. Жишээлбэл, том элементүүдийг харуулахыг хориглох, тэдгээрийг ямар ч тохиромжтой зүйлээр солих.

Өнгө, дэлгэцийг өөрчлөх жишээг ашиглан боломжуудыг харуулъя.

Ухаалаг гар утасны хувилбарт үндсэн цэс нуугдаж, блокны өнгө нь цэнхэр болж өөрчлөгдсөн бол том дэлгэц нь эдгээр өөрчлөлтгүйгээр дизайныг харуулдаг.

Ихэнх тохиолдолд навигацийг нуух шаардлагатай байдаг - энэ нь товчлуураар солигддог. Үүнийг javascript ашиглан хийх нь илүү тохиромжтой, та бэлэн шийдлүүдийг ашиглаж болно.

Засварыг цэгийн дагуу хийдэг, хүрээг дээрээс болон доороос хязгаарлаж болно. Энэ нь хурдан бөгөөд тохиромжтой - нэг мөрөнд тусдаа CSS тохируулдаг янз бүрийн төхөөрөмжүүдсайтын үндсэн үзэмжид нөлөөлөхгүйгээр.

Та @media дүрмийг дотроо хаана ч зарлаж болно одоо байгаа хүснэгтхэв маяг, эсвэл эдгээр мэдэгдлийн хувьд тусад нь үүсгэж, дараа нь @import дүрмийг ашиглан үндсэн CSS руу импортлоорой.

Сайтын гар утасны хувилбар: хэрхэн хийх, юу хайх вэ

Mediacware нь орчин үеийн бүх хөтчүүдэд ойлгомжтой боловч IE 8 болон түүнээс доош хувилбаруудад ажиллахгүй. Нөхцөл тайлбараар дамжуулан хуучин IE-д хандах замаар асуудлыг шийддэг. Тэдгээрийг CSS дээр биш харин загвар кодонд бичих хэрэгтэй.

Скрипт нь өөрөө github дээр байдаг ( https://github.com/scottjehl/respond), хуучин IE-д хамгийн бага ба хамгийн их хэмжээсүүд болон медиа хайлтуудын дэмжлэгийг нэмдэг.

Өөр нэг асуудал бол responsive дизайн нь Html5 ашиглахыг хэлдэг бөгөөд энэ нь хуучин хөтчүүдэд дахин ойлгомжгүй байдаг. Хакераар эмчилсэн:

Кодыг html дээр бичсэн бөгөөд үүнээс гадна үүсгэсэн элементүүдийн блок дэлгэцийг CSS-д тохируулсан болно.

толгой, навигац, хэсэг, нийтлэл, хажуу тал, хөл (дэлгэц: блок;)

Хэрхэн зарим скриптийг зөвхөн хэзээ харуулах вэ гэсэн асуултыг нэн даруй авч үзье өгөгдсөн параметрүүддэлгэц. Хэрэв jQuery суулгасан бол загварын кодонд энгийн скрипт нэмэх шаардлагатай болно. Тоонуудыг шаардлагатай тоо болгон өөрчилсөн. Энэ нь дараах байдалтай байна: хэрэв цонхны өргөн 980 пикселээс хэтэрсэн бол замд заасан скриптийг хуудсанд хэрэглэнэ. Та хэд хэдэн зүйлийг зааж өгч болно, синтаксийг буржгар хаалт дотор цэгтэй таслалаар аналогиар бичнэ.

Хэрэв ($(баримт). өргөн() > 980) (

$.getScript("скрипт рүү хүрэх зам");

Өөр нэг зүйл бол яаж гар утасны хөтөч iPhone нь өгөгдсөн агуулгыг боловсруулах ёстой, түүний өсөлтийг зөвшөөрсөн эсэхээс үл хамааран. Үүнийг хийхийн тулд эхний масштабыг толгой дээр бичнэ.

Зөвхөн зөв эсэхийг шалгахад л үлддэг - үүний тулд та өөрийн хөтөч, утсаа ашиглах эсвэл үйлчилгээтэй холбоо барьж болно.

Хэрэв сайтыг хөрвүүлсэн бол локал сервер, зөв ​​эсэхийг тодорхойлох боломжтой ami.responsivedesign.is. Тохиромжтой харуулахын тулд Денверийн эзэд серверийн httpd.conf файлыг засах замаар кодчилолыг utf-8 болгон өөрчлөх шаардлагатай болно.

Энэхүү үйлчилгээ нь төсөл өөр өөр төхөөрөмж дээр хэрхэн харагдахыг харуулах болно.

Нэмж дурдахад загварыг туршиж үздэг https://developers.google.com/speed/pagespeed/insights/эсвэл тусгай хэлбэрээр https://www.google.com/webmasters/tools/mobile-friendly, түүнчлэн вэбмастерууд дээр.

Yandex-д энэ нь нарийвчилсан харагдаж байгаа бөгөөд Google ямар ч асуудал байхгүй гэж мэдээлэх болно.

Хэрэв бүх зүйл зөв хийгдсэн бол гүйлгэх, шаардлагагүй элемент байхгүй болно. Гар утасны хувилбар бэлэн болсон бөгөөд одоо та үүнийг өөрөө хэрхэн хийхийг сурсан. Хэрэв материал танд хэрэгтэй байсан бол лайк дарж, блогын мэдээллийн товхимолд бүртгүүлээрэй. Хамгийн сайн сайхныг хүсье.

Доорх товчлууруудын аль нэг дээр дарснаар та энэ хичээл дээр эвхэгдсэн хуудасны 2 жишээг татаж авах боломжтой бөгөөд ажиллахад хялбар болно. бэлэн хуудаснуудмөн кодыг хуулна уу.

Хүндэтгэсэн, Галиулин Руслан.

Өнөөдөр ихэнх хүмүүс гар утасны хэрэгсэл - таблет, утаснуудаар дамжуулан онлайнаар холбогддог, энэ талаар сайтын оновчлол нь бас явдаг. шинэ түвшин. Хэрэв хэрэглэгч орж ирээд сайтыг хөдөлгөөнт төхөөрөмжид тохируулаагүй байгааг харвал: зургийг харах боломжгүй, товчлуурууд нь нүүсэн, фонтууд нь жижиг, унших боломжгүй, дизайн нь хазайсан - 100% -ийн 99 нь гарах болно. өөр илүү тохиромжтойг хайж эхлээрэй. A нь нөөц нь хамааралгүй, өөрөөр хэлбэл хайлтын асуулгад тохирохгүй байгаа нүдийг шалгана. Тиймээс хуудасны дизайн нь янз бүрийн хөдөлгөөнт төхөөрөмжид тохирсон байх ёстой. Сайтын гар утасны хувилбар гэж юу вэ, үүнийг хэрхэн хийх, түүнийг ашиглах хамгийн сайн арга юу вэ? Энэ нийтлэлээс дэлгэрэнгүй уншина уу.

Тиймээс сайтыг гар утасны хувилбарт тохируулах дөрвөн үндсэн арга бий.

Нэгдүгээр арга - Хариуцлагатай дизайн

Responsive загварууд нь дэлгэцийн хэмжээнээс хамааран сайтын зургийг өөрчилдөг. Дүрмээр бол тэдгээрийг 1600, 1500, 1280, 1100, 1024, 980 пикселийн стандартаар тохируулдаг. Хэрэгжүүлэхийн тулд асуулга ашигладаг. Энэ нь өөрөө өөрчлөгддөггүй.

Энэ аргын давуу талууд нь:

• Тохиромжтой хөгжүүлэлт, бүтэц нь өөрөө дэлгэцийн параметрүүдэд дасан зохицдог тул аливаа шинэчлэлт нь дизайныг эхнээс нь боловсруулах шаардлагагүй тул CSS болон HTML-г өөрчлөхөд хангалттай;
• нэг URL хаяг- хэрэглэгч хэд хэдэн нэрийг санах шаардлагагүй, вэбмастерын ажлыг хүндрүүлж болох дахин чиглүүлэлт (нэг хаягаас нөгөө хаяг руу дахин чиглүүлэх) шаардлагагүй, хайлтын систем нь нөөцийг эрэмбэлэх, эрэмбэлэхэд хялбар байдаг. нэг хаягтай.

Мэдээжийн хэрэг, дасан зохицох загварууд нь давуу талуудаас илүү сул талуудтай байдаг. Гэсэн хэдий ч олон хөгжүүлэгчид энэ үзэл баримтлалыг баримталдаг, жишээлбэл, сайтын гар утасны хувилбар нь дасан зохицох загвартай Google корпораци. Тиймээс сул талууд:

• Хариуцлагатай дизайн нь ширээний компьютер дээр хийдэг шиг гар утсан дээрх даалгавруудыг дэмждэггүй. Хэрэв энэ нь жишээлбэл, валютын ханш эсвэл хамгийн ойрын АТМ-ийн талаарх мэдээлэл нь хэрэглэгчдэд илүү чухал байх магадлалтай банкны вэбсайтын гар утасны хувилбар юм бол энэ загвар нь хангалттай юм. Гэхдээ хэрэв энэ нь олон хэсэг, дэд хэсгүүдтэй нарийн төвөгтэй бүтэцтэй нөөц юм бол зочдод таалагдах магадлал багатай.
• Удаан ачаалах нь дуртай сайтыг үзэн ядсан сайт болгон хувиргадаг. Энэ нь ялангуяа хөдөлгөөнт дүрс, видео, попап болон бусад идэвхтэй элементүүд элбэг байдаг нөөцийн хувьд үнэн юм. Их жинтэй тул хуудас зүгээр л "удаашрах болно", хэрэглэгч уурлаж, орхих болно байрлал хайхсайт - намар.
• Гар утасны хувилбарыг идэвхгүй болгох боломжгүй байгаа нь бас нэг чухал сул тал юм. Хэрэв зарим элемент ийм зохион байгуулалтаар нуугдаж байвал та үүнийг унтрааж, ердийн домэйн руу шилжих боломжтой сайтуудаас ялгаатай нь нээхийн тулд юу ч хийж чадахгүй.

Гэсэн хэдий ч сайтын ийм гар утасны хувилбар нь тусгай ур чадвар, зардалгүйгээр хурдан нөөцийг ямар ч хэрэгсэлд тохируулах боломжийг олгодог. Гэхдээ жагсаасан дутагдлуудыг харгалзан үзэхэд энэ нь хамгийн бага мэдээлэл, мультимедиа бүхий жижиг, энгийн нөөцөд тохирох болно. хэцүү навигациболон хөдөлгөөнт дүрс. Нарийн төвөгтэй сайтын хувьд өөр 2 арга тохиромжтой.

Хоёр дахь арга - сайтын тусдаа хувилбар

Энэ арга нь маш түгээмэл бөгөөд сайтыг хөдөлгөөнт төхөөрөмж дээр илүү унших боломжтой болгоход амжилттай байдаг. Үүний мөн чанар нь програмд ​​зориулж зурсан, тусдаа URL эсвэл дэд домайн, жишээлбэл, m.vk.com дээр байрлах хуудасны тусдаа хувилбарыг бий болгох явдал юм. Үүний зэрэгцээ үндсэн функцууд хадгалагдан үлдэж, сайтын дизайн зүгээр л өөр харагдаж байна. Энэ аргын давуу талууд нь тодорхой байна:

• хэрэглэгчдэд ээлтэй интерфэйс;
• хувилбар нь үндсэн эх сурвалжаас тусдаа байдаг тул өөрчлөх, засварлахад хялбар байдаг;
• жин багатай тул сайтын тусдаа хувилбар нь илүү хурдан ажилладаг хариу үйлдэл үзүүлэх загвар;
• Ихэнх тохиолдолд гар утаснаас хуудасны үндсэн хувилбар руу очих боломжтой байдаг.

Гэхдээ энд ч гэсэн энэ нь сул талгүй байсан:

• Хэд хэдэн хаягууд - сайтын ширээний болон гар утасны хувилбар. Хэрэглэгчид хоёр сонголтыг хэрхэн санаж байх вэ? Вэб мастерууд ихэвчлэн ширээний хувилбараас гар утасны хувилбарыг зааж өгдөг боловч хэрэв энэ хуудас гар утасны хувилбарт байхгүй бол хэрэглэгч алдаа хүлээн авах болно. Энд хайлтын системд бэрхшээлтэй тулгардаг бөгөөд энэ нь 2 ижил нөөцийг эрэмбэлэхэд хэцүү байдаг бөгөөд энэ нь сурталчилгаанд шууд нөлөөлдөг.
• Компьютер дээрх сайтын гар утасны хувилбар нь хэрэв хэрэглэгч санамсаргүйгээр зочилсон бол инээдтэй харагдах бөгөөд энэ нь замын хөдөлгөөнд нөлөөлж болзошгүй юм.
• Энэ хувилбар нь ихэвчлэн маш хязгаарлагдмал, ширээний байдаг тул хэрэглэгч маш хязгаарлагдмал функцийг хүлээн авах болно. Гэхдээ тэр үед ямар нэг зүйл дутуу байвал зочин очиж болно бүрэн хувилбархуудаснууд.

Ерөнхийдөө, тусдаа гар утасны сайт нь өөрийгөө зөвтгөдөг бөгөөд гар утасны төхөөрөмжүүдийн нөөцийг тохируулах хамгийн түгээмэл арга юм. Энэ нь Amazon зэрэг томоохон онлайн дэлгүүрүүдэд түгээмэл байдаг.

Гурав дахь арга - RES-дизайн

Google хайлтын систем нь гар утасны дизайны энэ чиглэлийг идэвхтэй дэмждэг. Энэ нь сайтыг утас эсвэл таблетад тохируулах хамгийн төвөгтэй, өртөг өндөртэй боловч үр дүнтэй арга юм. Үүнийг RESS гэж нэрлэдэг. Энэ бол төхөөрөмж тус бүрийг тусад нь татаж авах боломжтой гар утасны программ дахь нөөцийг чиглүүлэх явдал юм. Android-д - GooglePlay-тэй, Apple-д - iTunes-тэй.

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

Мэдээжийн хэрэг, энд хөгжүүлэлтийн нарийн төвөгтэй байдал, олон тооны програмистуудын хөдөлмөрийн зардал өндөр, байршлын хэд хэдэн хувилбар хийх шаардлагатай зэрэг сул талууд бий. Заримдаа хөдөлгөөнт төхөөрөмж нь програмаар танигддаггүй. Тогтмол техникийн дэмжлэг, дутагдлыг засах. Гэсэн хэдий ч энэ сонголт нь бүтээмжтэй, тасралтгүй ажилладаг тул санал болгож буй гурваас хамгийн шилдэг нь гэж тооцогддог.

Гар утасны вэбсайт хийх хамгийн хямд арга

Дээрх бүх аргууд нь үргэлж урт бөгөөд төвөгтэй биш боловч вэбмастерын цалинтай ажлыг багтаадаг. Хэрэв та ийм хөгжүүлэлтийг яаралтай хийх шаардлагагүй гэж үзвэл сайтын энгийн бөгөөд үнэгүй гар утасны хувилбар танд тохирох болно. Үүнийг хийх хамгийн хялбар арга юу вэ?

Тусгай загваруудыг (залаас) татаж авах дасан зохицох загвар. Жишээлбэл, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile болон бусад. Тэд сайтыг утсан дээр илүү зөв харуулахад туслах бөгөөд хуудсыг гар утасны хувилбарт илүү сайн тохируулахын тулд юуг засах шаардлагатай талаар цөөн хэдэн зөвлөгөө авах болно.

Мэдээжийн хэрэг, энэ арга нь ноцтой нөөцөд тохиромжгүй юм. Харин ч тэр үнэгүй боломжнь жижиг, энгийн сайтууд, блогууд, мэдээ мэдээллийн хэрэгсэлд зориулагдсан. Google хайлтын систем, мөн Yandex нь өнөөдөр гар утасны хувилбаруудад ноцтой шаардлага тавьж байгаа тул энэ аргыг ашиглан байр сууриа бууруулах асар их боломж байгааг бүү мартаарай.

Энэ аргын тусламжтайгаар зар сурталчилгаа болон гарч ирэх баннерууд таслагдах боловч хуудас хурдан бөгөөд "хоцролгүйгээр" ачаалах болно.

Гар утасны хувилбарыг бий болгох зарчим

Сайтын гар утасны хувилбарыг үнэ төлбөргүй эсвэл вэбмастеруудын тусламжтайгаар бүтээсэн эсэх нь хамаагүй, үүнийг RESS систем дээр эсвэл дасан зохицох загвар ашиглан хийсэн. Хамгийн гол нь үр дүнтэй ажиллахын тулд хэд хэдэн чухал зарчмуудыг дагаж мөрдөх шаардлагатай. Тэгэхээр сайтын гар утасны хувилбар ямар байх ёстой вэ? Үүнийг хэрхэн бүтээмжтэй, үр ашигтай, үр дүнтэй болгох вэ?

Бид шаардлагагүй бүх зүйлийг устгадаг

Минимализм бол сайтын гар утасны хувилбарыг хөгжүүлэгчийн хичээх ёстой зүйл юм. Өнгө, товчлуур, баннераар дүүрэн, зөв ​​материалыг хайж олохын тулд эцэс төгсгөлгүй гүйлгэх шаардлагатай мэдээллийг олж авахад хичнээн хэцүү болохыг төсөөлөөд үз дээ. Гар утасны загвар нь энгийн бөгөөд цэвэрхэн байх ёстой. Орон зайг хуваахын тулд 2-3 өнгө сонгох хэрэгтэй (жишээлбэл, бренд). Тэдний нэг нь цагаан өнгөтэй байвал дээр. Жижиг дэлгэцийн орон зайг ойлгомжтой, унших боломжтой бүсэд хуваа. Виртуал түлхүүрүүд нь харагдахуйц байх ёстой бөгөөд ингэснээр хэрэглэгч хаана дарж, харахаа тодорхой мэддэг байх ёстой - энд бүтээгдэхүүн, энд өгөгдөл бөглөх маягт, хүргэлт, төлбөрийн талаархи мэдээлэл энд байна.

Бүгд нэмэлт сонголтууд, энэ нь ширээний хувилбарт хэрэг болох бөгөөд хэрэглэгчийн амьдралыг хөнгөвчлөх нь энд зөвхөн бэрхшээлийг авчрах болно. Зөвхөн хамгийн чухал элементүүдийг үлдээгээрэй. хөдөлгөөнт дүрс, сурталчилгааны баннерууд, мультимедиа нь сайт эсвэл програмын ажлыг удаашруулж, гол зүйлээс сатааруулах магадлалтай.

тэгшитгэх

Зохицуулах асуудал тийм ч хурц биш, учир нь буруу хийсэн тохиолдолд хэрэглэгч зөвхөн чухал үгсийн төгсгөлийг авах болно. Зүүн болон босоо байрлалыг ерөнхийд нь хүлээн зөвшөөрдөг. Өөрийгөө утсан дээрх мэдээний сувгийг гүйлгэж байна гэж төсөөлөөд үз дээ. Та үүнийг дээрээс доошоо хийдэг, гэхдээ зүүн эсвэл баруун тийш биш.

Холбоо

Шилжилтийн урт гинжин хэлхээний боломж байхгүй үед хэд хэдэн алхамыг нэг алхам болгон нэгтгэхийг хичээ. Жишээлбэл, сайт нь хэд хэдэн үе шаттайгаар өгөгдөл оруулахыг шаарддаг - нэр, дараа нь хаяг, тусдаа нүд тус бүр тусдаа байшин, гудамж, орон сууц гэх мэт. Хэрэглэгчийг олон жижиг нүдийг цохихыг оролдохгүйн тулд асуугаарай. түүнийг зөвхөн 2 - нэр, хаягийг бөглөнө үү.

Мөн салгах

Заримдаа эсрэгээр нь салгах шаардлагатай болдог олон тоонымэдээлэл. Жишээлбэл, унадаг цэсэнд хүргэлт хийгддэг 80 гаруй хотын жагсаалт байдаг. Хэрэглэгч энэ том жагсаалтыг гүйлгэх шаардлагагүй болгохын тулд тэдгээрийг бүс нутгаар бүлэглээрэй. Түүнийг бүс нутгийн төв эсвэл бүс нутаг руу чиглүүлэхэд өөр хотуудын жагсаалт гарах болно.

Жагсаалтууд

Дашрамд хэлэхэд жагсаалтын тухай. Тэдгээрийн хоёр нь цагаан толгойн үсгийн дарааллаар эсвэл өөр дарааллаар, орлуулалттай байдаг. Тэдний сонголт нь юу жагсаахаас хамаарна.

Хэрэглэгч яг юу хайж байгаагаа мэддэг бол Fixed нь ашигтай. Жишээлбэл, хот, дугаар эсвэл огноо. Хоёрдахь сонголт нь урт нарийн төвөгтэй нэрс эсвэл ижил нэртэй олон хувилбартай тохиолдлуудад тохиромжтой бөгөөд тус бүр нь хэрэглэгчийг зорилгодоо нэг алхам ойртуулдаг. Зочдод тусламж хэрэгтэй үед автоматаар орлуулах сонголтыг ихэвчлэн ашигладаг. Жишээлбэл, сүлжмэлийн сайт нь сүлжмэлийн зүү худалдаж авахыг санал болгодог. Хэрэглэгч ордог хайлтын асуулга"Металл сүлжмэлийн зүү", гэхдээ зааврын хэсэгт тэрээр "5 мм сүлжмэл зүү", "4.5 мм сүлжмэл зүү" гэх мэтийг хардаг.

Автоматаар гүйцээх

Энэ цэг нь ямар нэгэн зүйл онлайнаар зарагддаг сайтуудын хувьд ялангуяа үнэн бөгөөд та бөглөх ёстой стандарт хэлбэрүүдтөлбөр, хүргэлт гэх мэт. Хэрэв хүн утаснаасаа худалдан авалт хийвэл тэр компьютерт очих цаг байхгүй байх магадлалтай бөгөөд энэ нь худалдан авалтын үйл явцыг аль болох хурдан, хялбар хийх шаардлагатай гэсэн үг юм.

Үүнийг хийхийн тулд маягтууд нь аль хэдийн бөглөсөн өгөгдлийг агуулж болно, та хамгийн алдартай хариултуудыг ашиглаж болно. Жишээлбэл, хэрэв та нэг бүс нутагт ажилладаг бол өнөөдрийн огноо, бэлэн мөнгөөр ​​төлөх арга, хотыг оруулна уу. Тэдгээрийг өөрчилж болно, гэхдээ хэрэв та зорилтот түвшинд хүрсэн бол хэрэглэгчийн цагийг хэмнэх болно.

Бүгдийг уншсан, бүх зүйлийг харж байна

Сайтын гар утасны хувилбарын дизайныг гаргахдаа хүн бүрийн гар утас өөр өөр байдгийг санаарай. Магадгүй таны сайт жижиг дэлгэцээс харагдах тул фонтууд нь энгийн бөгөөд уншихад хялбар, товчлуурууд нь өөр хуудас руу шилжихгүйгээр дарахад хангалттай том байх ёстой бөгөөд зургууд нь тусад нь нээгдэх, ялангуяа том хэмжээтэй байх ёстой. бид ярьж байнаонлайн дэлгүүрийн тухай.

Зарим статистик

Сайтыг мобайл төхөөрөмжид дасан зохицох талаар ярихад энэ үйл явц нь онлайн сурталчилгаанд хэр чухал болохыг ойлгохын тулд статистик мэдээлэлд хандахаас өөр аргагүй юм.

Тоонууд дараах байдалтай байна. Өнөөдөр гаджетыг хүн амын 87% нь бага насны хүүхдүүд болон зарим өндөр настангуудыг эс тооцвол ашигладаг бололтой. Эдийн засагчид өсөлтийг таамаглаж байна гар утасны худалдааДараагийн 5 жилд 100 удаа. Үүний зэрэгцээ сайтуудын зөвхөн 21% нь хөдөлгөөнт төхөөрөмжтэй ажиллахад тохирсон байдаг. Энэ нь интернетийн траффик болон цахим худалдааны зах зээлийг зөвхөн 5 дахь жижиг хэсэг эзэлдэг гэсэн үг юм.

Эдгээр тоонуудын талаар бод. Өөрийн нөөцийг тохируулах нь утга учиртай юу? Мэдээж хэрэг тийм. Түүнээс гадна, маш олон байхад чөлөөт зайэнэ зах зээл дээр та өөрийн сегментийг авч болно.

Гар утасны хувилбар хаана хэрэгтэй вэ?

Гар утасны хувилбарыг ашиглах нь өндөр зэрэглэл тогтоох зорилготой аливаа платформд утга учиртай. Эцсийн эцэст, энэ нь хэрэглэгчдэд шууд нөлөөлж, таны сайтад үлдэх тав тухтай нөхцлийг бүрдүүлдэг.

Гар утасны хувилбаргүй бол байж болохгүй:

• мэдээний порталууд, учир нь тэдний ихэнх нь ажил эсвэл суралцах замдаа утаснаас харагддаг;
• нийгмийн сүлжээ - ижил шалтгаанаар, мөн онлайн харилцааны хүчин зүйл байдаг бөгөөд энэ нь тохиромжтой, ойлгомжтой чат үүсгэх ёстой гэсэн үг юм;
• лавлагаа, навигаци бүхий сайтууд гэх мэт хүмүүс ямар нэгэн зүйл хайж байхдаа хаана очдог;
• онлайн худалдаа - дэлгүүр хэсэх цаг заваа үрдэггүй, харин гар утасны интернетээр дамжуулан бүх зүйлийг худалдаж авдаг үйлчлүүлэгчдийг татах боломж.

Дүгнэлтийн оронд

Өнөөдөр хөдөлгөөнт технологиидэвхтэй өсөлт, хөгжлийн үе шатанд байгаа тул зах зээлд манлайлахыг эрмэлзэхийн тулд аливаа компани интернет нөөцөө шаардлагад нийцэж байгаа эсэхийг баталгаажуулах ёстой. Хэрэглэгчийн өсөн нэмэгдэж буй эрэлт хэрэгцээний улмаас сайтуудыг байнга шинэчилж, дасан зохицох шаардлагатай болдог янз бүрийн төхөөрөмж. Хэрэв тухайн хүн тодорхой нөөц дээр байх нь тохиромжгүй бол тэнд бүтээгдэхүүн, үнийн талаар мэдээлэл авах, захиалга өгөх, хүргэлтийн талаар олж мэдэх боломжгүй бол энэ бүхэн боломжтой болох сайтыг олох нь ойлгомжтой. . Тиймээс өрсөлдөөнд ялахын тулд уян хатан, тохиромжтой, ажиллагаатай, сонирхолтой нөөцтэй байх нь чухал юм.

Үүнийг хийхэд Android эсвэл Ios сайтын гар утасны хувилбар туслах болно. Үүнийг хийхийн тулд та дээрх дахин дизайны аргуудын аль нэгийг сонгох хэрэгтэй - дасан зохицох загвар, дэд домайн дээр шинэ сайт үүсгэж, дахин чиглүүлэх замаар түүн рүү очно уу. үнэгүй загваруудэсвэл бүтээл гар утасны програм, үүний тусламжтайгаар хэрэглэгч илүү хялбар нэвтэрч, хуудсан дээр байх боломжтой.

AT орчин үеийн ертөнцЗаримдаа өөрийн вэбсайттай байх нь утасны дугаар эсвэл хаягтай байхаас дутахгүй чухал байдаг Имэйл. Харамсалтай нь хүн бүр бие даан үзэсгэлэнтэй мэргэжлийн вэбсайт хийж чаддаггүй, заримдаа муруй ч ажиллахгүй байдаг. Хүн бүр үүнийг төлж чадахгүй тул програмистуудаас захиалах нь тийм ч тохиромжтой шийдэл биш юм.

Үнэгүй HTML вэбсайтын загварууд нь таныг энэ байдлаас гарахад тусална. HTML сайтын загвар нь тодорхой сэдвийн сайтад зориулсан бэлэн статик хуудасны багц юм. Энэхүү загварыг ашигласнаар та хэдхэн цагийн дотор үндсэн мэдлэгтэй энгийн вэбсайт үүсгэж болно HTML тэмдэглэгээ. HTML хэсэгт та дахиад хэдэн цаг хичээлээ өнгөрөөвөл энэ мэдлэгийг олж авах бөгөөд CSS хэсэгт цаг зав гаргахгүй бол HTML сайтын загваруудын дизайныг бүрэн хянаж, тэдгээрийг бүрэн өөрчлөх боломжтой болно. таны хэрэгцээнд.

Вэб сайтын загваруудын бас нэг маргаангүй давуу тал нь ихэнх тохиолдолд мэргэжлийн хүмүүс бичсэн байдаг. Мэргэжлийн сайтын загвар нь зөвхөн үзэсгэлэнтэй биш гэсэн үг юм орчин үеийн дизайн, гэхдээ бас код бичсэн шиг. Хайлтын системүүдТэд таны сайт хэрхэн бичигдсэн, код нь SEO оновчтой эсэхээс үл хамааран хардаг бөгөөд үүний үндсэн дээр хайлтын үр дүнд таны байр суурийг бууруулж эсвэл нэмэгдүүлдэг. Тиймээс сайн сайт нь зөвхөн үзэсгэлэнтэй, орчин үеийн байхаас гадна кодын хувьд сайн бичигдсэн байх ёстой.

Үнэгүй HTML вэбсайтын загваруудыг татаж аваад, төслөө цаг алдалгүй бүтээгээрэй.

Өнөөдөр олон компаниуд өндөр чанартай гар утасны нөөцийг бий болгоход илүү их анхаарал хандуулдаг, учир нь хамгийн сүүлийн үеийн мэдээллээр интернет хэрэглэгчдийн 80% нь ашигладаг. зөөврийн төхөөрөмжүүдхэрэгтэй мэдээллээ олохын тулд. Нэмж дурдахад маркетерууд 2015 оны 4-р сарын 21-нд хэрэгжиж эхэлсэн Google-ийн алгоритмд томоохон өөрчлөлт хийхээр бэлтгэж байна. Компанийн албан ёсны блогт одоо чанарын тухай бичсэн байна гар утасны оновчлолнөөц нь хайлтын үр дүнд түүний байр суурийг ихээхэн тодорхойлох болно.

Удахгүй болох шинэчлэлт нь ижил Panda эсвэл -ээс илүү зэрэглэлийн системд илүү их нөлөө үзүүлэх бөгөөд иймээс сайжруулалт хийгдсэн. гар утасны туршлагаойрын ирээдүйд таны нэн тэргүүний зорилт байх ёстой. Search Engine Land-ийн энэхүү шинэчлэлтийн талаархи нийтлэлийн дагуу бүх сайтууд гар утсанд хариу үйлдэл үзүүлэх хатуу шалгалтанд хамрагдах болно.

Та сайтаа ийм томоохон өөрчлөлтөд бүрэн бэлтгэхийн тулд бид танд зориулж гар утасны вэб дизайны урам зориг өгөх 15 жишээг сонгов.

Shutterfly бол зургийн цомог, мэндчилгээний хуудас, урилга захидал болон бусад зүйлийг хийх боломжийг олгодог онлайн үйлчилгээ юм. Өдөр бүр илүү олон хүмүүс ухаалаг гар утсаараа зураг руугаа ханддаг тул Shutterfly нь хэрэглэгчиддээ гар утасны эерэг туршлага өгөхийг зорьж байна.

Компанийн гар утасны сайт нь хоёр үндсэн шалтгааны улмаас амжилттай хэвээр байна: энэ нь хэрэглэгчдэд санал болгож буй мэдээллийг олоход хялбар болгож, үзэсгэлэнтэй зургуудаар дамжуулан борлуулдаг.

Сайт руу орсны дараа та энд байгаа цэсийн хэсгүүдийг дэлгэцийн доод хэсэгт том товчлуурууд хэлбэрээр харуулах болно. Үүний ачаар зочдод сонирхож буй сонголтоо маш хурдан шийдэж, нэмэлт мэдээлэл авах боломжтой.

Би энэ загварыг IOS(3.1+), Android(2.1+), Blackberry(6.0+) зэрэг платформуудын стандарт хөтчүүдэд тохируулсан. Windows утас 7, мөн алдартай болж байгаа Android-д зориулсан Opera гар утас. Бүх стандарт хөтчүүд (IE9-тэй Windows Phone 7-ээс бусад) webkit дээр суурилдаг гэдгийг тэмдэглэхийг хүсч байна.

Ширээний сайтууд болон хөдөлгөөнт төхөөрөмжүүдэд зориулсан сайтуудыг хөгжүүлэх хоёрын хооронд ямар ялгаа байдаг вэ? Дараа нь би олон бэрхшээлийг даван туулахад туслах хэдэн заль мэхийн талаар ярих болно.

Ямар нягтралыг сонгох, мөн харах талбарын мета шошго

Манай сайтын үндэс болгон ямар зөвшөөрөл авах вэ гэсэн асуулт бидэнд байх ёстой юм шиг санагдаж байна уу? Эцсийн эцэст, 230x340 (жишээлбэл, HTC Wildfire S), 800x480,960x640 (HTC Incredible S, Iphone 4), тэр ч байтугай 1280x720 (HTC One X) хэмжээтэй төхөөрөмжүүд одоо хамааралтай болсон. Viewport мета шошго нь аврах ажилд ирдэг бөгөөд энэ нь асуудлыг шийдвэрлэх, масштабаар шийдвэрлэх болно.

• өргөн = төхөөрөмжийн өргөн - утгыг төхөөрөмж өөрөө тохируулдаг
• анхны масштаб=1 - эхний хуваарийг 1 болгож тохируулсан (жишээ нь 1:1)
• максимум-масштаб=1.0, хэрэглэгчийн масштабтай=үгүй - масштабыг идэвхгүй болгосон (Эдгээр тохиргоотой байсан ч HTC зөрүүд масштабтай хэвээр байх болно гэдгийг тэмдэглэхийг хүсч байна, хөгжүүлэгчид үүнийг алдаа биш, харин онцлог шинж чанартай гэж хэлсэн)

Графикийн талаар бага зэрэг

Ийм нарийвчлалтай байсан ч ихэнх хөдөлгөөнт төхөөрөмжүүд байдаг гэдгийг тэмдэглэх нь зүйтэй өндөр нарийвчлалтайТэд үүнийг ажлын талбараа өргөжүүлэхийн тулд бус харин тодорхой байдлыг нэмэгдүүлэхийн тулд ашигладаг (энэ талаар дэлгэрэнгүй). Өөрөөр хэлбэл, тэдгээрийн пикселийн ханалт (DPI) нь жижиг нарийвчлалаас хэд дахин их байдаг. Том PDI-тай төхөөрөмжүүд нь бага нарийвчлалтай төхөөрөмжүүдтэй ижил хэмжээсийг авахын тулд сайтыг 2 дахин шахдаг гэсэн дүгнэлт хаанаас гардаг вэ (жишээлбэл, Apple-ийн төхөөрөмжүүдТорлог бүрхэвч нь дэлгэцийн ижил хэсэгт 4 дахин их цэгүүдтэй байдаг бөгөөд энэ нь тод байдлыг нэмэгдүүлдэг). Доорх зурган дээрээс бид үр дүнг илүү сайн харж болно.

Одоо бид өндөр DPI-тэй дэлгэц хэрхэн ажилладагийг мэдэж байгаа тул манай вэбсайтын бүх элементүүдийг зөв харуулах талаар бодох нь зүйтэй болов уу.
Фонт, хүрээ болон бусад ижил төстэй элементүүд гэх мэт элементүүдээс эхэлье. Эдгээр бүх элементүүд нь үндсэндээ вектор объектууд бөгөөд хөтөч нь ямар ч асуудалгүйгээр өргөжүүлж чаддаг тул бид энэ талаар ярихгүй.
Өөр нэг зүйл бол зураг болон дэвсгэр зураг. Эцсийн эцэст, хэрэв бид 320x480 хэмжээтэй байгаа дээрээ тулгуурлан дэвсгэр зургийг хадгалах юм бол илүү нягтралтай DPI бүхий төхөөрөмжүүд бидний өмнө бүх сүр жавхлангаараа харагдахгүй бөгөөд зургийн тод байдал, сэтгэл татам байдлыг илэрхийлэх бүх хүчин чармайлт гаргах боломжгүй болно. Зураг нь алга болно, учир нь тэд үүнийг 2 дахин ихэсгэх болно (хөтөч хичнээн сайн масштабтай байсан ч програм хангамжийн хэмжээ нэмэгдэхэд чанар нь үргэлж алдагддаг). Эндээс авъяас чадвар орж ирдэг! Би жишээгээр тайлбарлахыг хичээх болно. Бидэнд сайт байгаа бөгөөд түүний толгой хэсэгт 320px өргөнтэй тодорхой дэвсгэр байдаг. Тиймээс манай супер тунгалаг дэлгэцүүд энэ зургийг 100% харуулахын тулд анхны зураг нь 320x50 биш харин 640x100 (яг 2) байх ёстой. дахин том) , аль хэдийн css-г ашиглаж байгаа дэвсгэр хэмжээ: 320px 50px;. Бид ижил төстэй бөө мөргөлийг img хэлбэрээр зурагтай хийдэг.

Асуултуудыг оновчтой болгох

Android, BlackBerry, IOS болон Windows Phone 7 нь Data-url-г бүрэн дэмждэг тул бид бүгдийг хэрэгжүүлснээр хүсэлтийн тоог эрс багасгаж чадна. дэвсгэр зураг css дээр. Асуулгын оновчлолоос гадна бид css кэшийн ачаар асар их ашиг олж байна.

Спрайт болон зурагтай холбоотой асуудал

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

Зургийн форматтай холбоотой жижиг асуудал

Би бас зургийн форматтай холбоотой зарим төхөөрөмж дээр таагүй асуудалтай тулгарсан. Дахин нэг жишээ хэлье: Photoshop програмын Save for Web ашиглан хадгалсан 2 зураг байна (тэдгээрийн нэг нь Y тэнхлэгийн дагуу сунасан шугаман градиент, хоёр дахь нь хэсэгчлэн хайчилж авсан зураг юм. градиент, мөн үнэндээ давтагдсан градиенттай таарах ёстой) гэхдээ өөр өөр форматтай (png болон jpg). Тиймээс зарим төхөөрөмж дээр нэг зураг илүү цайвар, хоёр дахь нь бараан өнгөтэй байна. Тиймээс энэ асуудлыг шийдэхийн тулд би хоёр зургийг ижил форматаар хадгалах хэрэгтэй болсон.

URL мөрийг нууж байна

Бидний төхөөрөмж дээр тийм их зай байхгүй тул нэмэлт хэдэн арван пиксел ялах нь бидэнд хор хөнөөл учруулахгүй. Мөн бид URL мөрийг нуух замаар тэдгээрийг олох боломжтой. Үүний тулд бидэнд энгийн скрипт байна:

AddEventListener("ачаалах", функц() (setTimeout(hideURLbar, 0); ), худал); функц hideURLbar() ( window.scrollTo(0, 1); )

Гэхдээ хэрэв бидний холбоос зангууны аль нэгэнд хүргэвэл энэ скрипт бидэнд саад учруулж болзошгүйг би анхаарна уу шинэ хуудас(энэ тохиолдолд бид элемент рүүгээ гүйлгэж, хуудсыг ачаалсны дараа дээд талд нь буцах болно), гэхдээ манай URL дээр нэмэлт шалгалт хийснээр үүнээс зайлсхийх боломжтой.

Элемент дээр товших визуал эффект

Жишээлбэл, IOS дээр бид :active псевдо ангиллын тусламжтайгаар товшилтын эффект гаргаж чадна. Гэхдээ энэ нь хуудсыг гүйлгэх үед бидний элемент анхаарал төвлөрүүлсэн байсан ч ажиллах болно, энэ нь тийм ч таатай биш юм. Тиймээс би хуудсыг гүйлгэх үед товшилтыг дуурайж, цуцлах жижиг скрипт бичихээр шийдсэн.

var scroller=false; $("a").live("touchstart",function(event)( var elem=$(энэ); clickable=setTimeout(function () ( elem.addClass("идэвхтэй");), 100; )) ; $("a").live("touchmove",функц(үйл явдал)( clearTimeout(товших боломжтой); гүйлгэх=үнэн; )); $("a").live("touchend",function(event)( var elem=$(энэ); clearTimeout(товших боломжтой); if(!scroller) ( elem.addClass("идэвхтэй"); setTimeout(функц ( ) ( elem.removeClass("идэвхтэй");), 50); ) else ( elem.removeClass("идэвхтэй"); ) ));

Холбоос болон товчлуурын хүрээ, тодруулгыг арилгах

Холбоос дээр дарахад жаазтай, тодруулдаг гэдгийг хэрэглэгч бүр анзаарсан байх. Ийм нөлөө нь дизайнерын санааг ихээхэн сүйтгэж болзошгүй юм. Энд нэг төрлийн хэв маягийг дахин тохируулах нь аврах ажилд ирдэг (бүх вэб кит хөтөч дээр туршиж үзсэн бөгөөд эдгээр нь IOS, Android, BlackBerry хөтөчүүд юм)

*( -webkit-text-size-adjust: байхгүй; /*IOS дээрх алдааг ландшафтаар томруулж засах*/ тойм: байхгүй; /*холбоос болон товчлууруудын эргэн тойрон дахь хүрээг арилгах*/ -webkit-touch-callout: байхгүй; /* шаардлагатай бол текстийг тодруулахыг идэвхгүй болгох*/ -webkit-tap-highlight-color:rgba(0,0,0,0); /*холбоос болон товчлууруудын арын гэрэлтүүлгийг арилгах*/ )

тогтмол дэмжлэг

Мобайл технологиуд одоо маш хурдан урагшилж байгаа тул үүнийг бичиж байх үед тогтмол дэмждэггүй хөтчүүдийн хувь тэг болж байгаа тул би тайлбарыг хэт гүнзгийрүүлэхгүй. Эдгээр хөтчүүдийн хувьд бид iscroll ашиглах хэрэгтэй гэдгийг л хэлье. Би мөн скриптүүдийн динамик холболттой холбоотой бяцхан заль мэхийг тайлбарлах болно (энэ нь ердийн хөтчүүдэд нэмэлт файл холбохгүйн тулд шаардлагатай болно)

//IOS-ийн хуучин хувилбар илрүүлж байна var OSName="Үл мэдэгдэх үйлдлийн систем"; хэрэв (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS"; var bversion=parseInt(jQuery.browser.version,10); if((OSName=="MacOS")&&(bversion

AT энэ жишээХэрэв энэ нь Iphone бөгөөд хөтчийн хувилбар нь 534-ээс бага бол (энэ нь засварыг дэмждэггүй) эсэхийг шалгасан. Би fixing.js скриптийг динамик байдлаар оруулсан

CSS3

Түүнчлэн, бид аль хэдийн зарим css3 шинж чанаруудыг бүрэн ашиглах боломжтой гэдгийг бүү мартаарай (moz-, webkit-, o- угтваруудыг бүү мартаарай). WP7-ийн хувьд pie.htc-г оруулаарай.

IOS ширээний холбоос

Магадгүй IOS хэрэглэгчдийн хувьд Safari дээр сайтын холбоосыг ширээний компьютер дээр байрлуулж болох нь нууц биш байх болно.
Forismmatic-тай ийм холбоосын жишээ энд байна.

Доор HTML жишээдүрсний код (IOS өөрөө үүнийг томруулж, булангуудыг бөөрөнхийлнө), энэ холбоосыг програмаар нээх тухай мэдэгдэл (бүтэн дэлгэцээр ажилладаг), мөн URL мөрийг нуух код. Хэрэв хүсвэл та цонхны цонхыг ч харуулж болно.

- юу нээгдэхийг бүтэн дэлгэцээр зарлах, URL мөрийг нуух - төлөвийн мөрний өнгийг хар болгож өөрчлөх (боломжтой утгууд нь анхдагч, хар, хар тунгалаг). анхдагч - ширээний компьютер дээр гарч буй дүрсний холбоос.

Дээр дурдсан бүхний амьд жишээг бид харж болно.