Кадам кадам тапшырмасы боюнча: Уюлдук аппараттардын сайтты көнүү. Мобилдик интернет

сайттын мобилдик ылайыкташуу улам кыналган, планшет санынын кыйла популярдуу болуп бара жатат. Бул эмне? Мунун кандай пайдасы бар? Өзгөчө бул маселе онлайн дүкөндөрдүн жана ар кандай кызмат компаниялардын, блог жана популярдуу Суперстан сайттардын ээлери үчүн актуалдуу болуп саналат. Кандай мобилдик аппараттардын жүзөгө ашырылышы мүмкүн үчүн сайтка ылайыкташтырууга? Бул жерде макаланын алкагында талкууланат суроолордун кыскача тизмеси болуп саналат.

жалпы маалымат

Ошондуктан, биринчи кезекте, анын эмне үчүн карап көрөлү жооп дизайны. Ошентип, бир эле HTML-код жиберген бардык түзмөктөр турган тарам болуп саналат, ал эми элементтеринин өлчөмдөрү CSS аркылуу жөнгө салынат. Ар кандай издөө роботтор сыяктуу сайттарды аныктоо мүмкүн, сканерлөө көрүнүктүү беттер жана ресурстар берилет. Ушул себеп менен айтып берүү үчүн, теги мета аты = "терезеси" колдонушат. Уюлдук аппараттардын сайттын жасоо деген эмне?

теги карап көрөлү

Ошентип, ал күнү мета аты = "терезеси" болгон болушу керек. ал эмне кылат? Бул сайтты карап турган аппараттын экранында туурасы бет көлөмүн кантип шкаласы боюнча серепчиси, көрсөтмө бар. Бул майда-пункт менен толукталсын жок болсо, демейки бет эсептөө машиналары үчүн иштелип чыккан, көрсөтүлөт. Ал эми уюлдук браузерлер экранда туура мазмундун арип, эскертүү мазмунду же экранды жогорулатууга алып келет мазмунду, оптималдаштыруу аракет кылат, ал эми. жакшы болобу? Жок, мындай учурда сайттын мобилдик версия гана терс кабыл алып келет. Бардык ариптер шайкеш болот кийин, жашы жете элек болсо да, ал баракты жылдырып, алардын иш-аракеттеринин көбүрөөк санын үчүн зарыл, бирок, дагы эле Уикипедияны жакшыртуу. Уюлдук аппараттардын сайт ылайыкташтырууну текшерип, сиз тел, планшет же атайын кызматтарды жана программаларды колдонууга болот. Албетте, алгачкы эки параметрлери артык, бирок сиз башка аппараттардын көз карашы менен кылдат талдоо жана зарыл болгон убакытты үнөмдөө үчүн болсо, анда алар туура.

Уюлдук аппараттардын сайтты алмаштыруу кандай артыкчылыктары бар?

Бул ыкманы колдонуу менен, силерге мүмкүнчүлүк берет:

1. Колдонуучулар бир дарегин учурларда мазмунду бөлүшүү үчүн.
2. издөө механизмдерин алгоритмдер так барак макети алуу үчүн, ар кандай түрү менен баш аламандык бар.
3. каталарды ыктымалдыгын азайтат.
4. муктаждык кайра индекстөө жоюу менен жүктөө убактысын кыскартат.
5. ресурстарын сактоо.

Мындан тышкары, ийкемдүү барак бир нерсе үчүн бир нече жолдору деле кыйын түзүү. Уюлдук аппараттардын (бул таптакыр мүмкүн эмес болот) үчүн сайтка көнүү JavaScript жетиштүү билүү эмне үчүн кыйынга нерсе эмес жана стилдерди (CSS) жана сүрөттөрү менен иштей алат. Бул маселени көп ыкмалары бар. Макалада таанымал тандоо үч тарабынан каралат алкагында:

1. JavaScript жана басым.
2. Айкалыштыруу.
3. JavaScript динамикасы пайдалануу.

Келгиле, дагы майда-чүйдөсүнө чейин, аларды карап көрөлү.

JavaScript аркылуу кайра жасоо

Бул учурда, бир мазмун. Ал эми беттеги иштөө механизмине JavaScript туюнтма өзгөртүүлөр киргизилген. Бул учурда баары сахнада көз каранды. Бул алгоритм стилдер жадыбалы Каскаддоо медиа суроолорго окшош. иш жүзүндө иштеген чакан бир мисалды карап көрөлү. Ошондуктан, биз бир элементин <жазуусу> жайгаштырылган HTML-коду менен барак бар. анын суроо-талабы боюнча бир эле маалыматты өткөрүп берет. аны дарылоо жөнүндө сөз болгондо, бул олуттуу таасир аспаптын иштөөсүн да болот. Ал эми анын натыйжасында - барактын түзүү өзгөрөт. Мисалы, тескерисинче, эсептөө боюнча эмес, кыналган, жана таш лоокторго аны көргөнүнүн максатында оптималдаштыруу турган бир сүрөттөлүш менен жагдай. Бул тандоо маанилүү артыкчылыгы компүтерде ишке ашыруу жазуусу аныкталса болот. Мындан тышкары, эч кандай динамикалык мазмун дисплей бар, анткени, атайын аталышы алууга муктаж эмес.

кошунду

Бул учурда, мобилдик аппараттардын сайттын жасоо элдештирүү жана JavaScript өзгөчөлүктөрү жана Server милдеттерин аркылуу колдонулат. Кандай жалпы схемасын берет? Колдонуучу өзгөчө аспап сиздин сайтка кирет. JavaScript, ал ээ болгон кайсы туурасында маалыматы бар жана жүрүш үчүн өтөт. кийин түзмөккө жөнөтүлөт зарыл кодду пайда болгон жок. Ал эми бул тууралуу маалымат куки делосуна сакталат. Ал эми кийинки жолу Server аларга окуп келет. Бул ыкманын бир өзгөчөлүгү HTML кодексинин мира пайдалана билүү болуп саналат. Бирок, туура аталыштары өзгөртүп катышуусунда кам көрүүгө муктаж иштөөгө: User-агент. Мындай учурда сайттын Мобилдүү версия бир аз көбүрөөк эмгек талап кылынат.

Динамикалык JavaScript жана башка параметрлери

Бул учурда, ал ошол эле коду тышкы ишарат бир элемент менен камсыз болот, деп көрсөтөт, кандай агент жараша түрүн өзгөртүп турат, анын мазмунун көрүү колдонулат. Ошондуктан, келгиле, бир динамикалык баракча алдында турат. Ал кантип ишке ашырылат? User-Agent: Көп эле өзгөртүп, аны колдонушат. Ошондой эле маалымат барактарынан менен мамиле кылган жана реалдуу убакытта алып туруу, анын, албетте, абдан жакшы. теориясы жөнүндө дагы көп сөз болот. Жарадар эстеш үчүн эмес, кандай (<бөлүү>), Силер түзмө-түз "менен алектенгенде," мүмкүн болгон сайттын көрүнүшүн жана башка көптөгөн ар кандай нерселер. Бирок биз муну кантип билгибиз келет!

ишке ашыруу үчүн даярдоо

Бул ылайыкташма сайтты түзүү эки ыкмалар милдеттерди жүзөгө бар экенин белгилей кетүү керек:

1. Кол.
2. Автоматтык.

Башында, сен үчүн бул жолду тандашыбыз керек. Ошентип, мобилдүү түзмөктөр үчүн сайт көнүктүрүү үчүн плагин-тез ишти аткарууга болот. Бирок, ар бир эркек үчүн жаратылган гана болсо, так аныкталган эрежелер. ресурстарды аларга ылайык жаратылган болсо, мобилдик аппараттардын жасоо программалык сайтына жашыруун баарын аткарышы керек. Мындай чектөөлөр, кээде башка нерселер жана чыгармачылык көпчүлүк толук эркиндиктин жоктугунан кол менен жөнгө салуу үчүн пляжга машина менен келет. Ошондой эле бир нече мүнөттөн кийин программа жана жардам ресурстун жагымдуу нускасын алуу үчүн да, бирок, дагы эле кээ бир кемчиликтерди бар.

ийкемдүү макети

Кадимки "чизбургер" ээ болуу үчүн, салыштырмалуу гана бөлүктөрүн пайдалануу керек. Иш жүзүндө, бардык ариптер М эске алуу менен жөнгө салынат, ал эми элементтердин көлөмү пайыз катары көрсөтүлөт. мезгил-мезгили менен, бирок, (эгер чындап кааласак,) мүмкүн, ИИ колдонуп, ал эми алар жок кылууга жакшы. Эгер бардык жазылыгын (туурасы) жана бийиктигин көрсөтүү кийин, 1080, 1260, же 768, ал эми пайыздык сыяктуу белгилүү бир санын колдонулбашы керек. Мисал катары - туурасы: 90%. Сиз жасап, 80% болот, ал эми 99% жана 100%. Баары кожоюнунун эркине көз каранды. Бирок, белгилүү бир нерсенин пайда тексттин жөнүндө эмне айтууга болот? Бул учурда, бир жакшы формула бар: арип туурасы да ушул эле санды эске негизги компонентти бөлүп турат, жана биздин доо натыйжа. Кээде бул сандар өтө көп болушу мүмкүн экенин, кээде болот. Мисалы, стандарт - бул экран туурасы менен колдонуучулар 1260. Анан барып, биз өтө көп санын ала бөлүп жатканда 780. болуп саналат. Мен аны тегеректеп барбы? Ооба, абал татаал болуп саналат. Көптөгөн үчүн эмес, бар. Мындан кырдаалга карап жана тактык канчалык маанилүү экенин аныктоо. Сиз, мисалы, эки, үч, төрт же он ондук жерлерди эске алып коюуга болот. Мага ишен, бул жөнөкөй иш, мобилдүү түзмөктөр үчүн сайттын бул жасоо болуп саналат. CSS, Ыйык Китепте эч кандай ката бар болсо, анда ар бир ойной алат.

Ийкемдүүлүк арип, сүрөттөрдү, жана медиа суроолор

Алыдын ала, серепчи тексттин өлчөмү 16 пкс жазуунун койду. Бирок, жогоруда айтылгандай, бул ыкма биз үчүн өтө жагымсыз болуп саналат. Мындай учурда эмне кылуу керек? Андан кийин база наркын бөлүп керек. бир нече мисал карап көрөлү:

1. 16/16 = 1 эм.
2. 18/16 = 1125 эм.

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

Азыр, айкелдин карата. Баары макс-туурасын колдонуп, алардын өзгөчөлүктөрү, же каскад стилдер жадыбалы да жүргүзүлүшү мүмкүн. көлөмү пайыз катары аныкталган экенин унутпайлы! Ал эми медиа сурамдары тууралуу бир нече сөз. Алар кээ бир шарттарды коюу үчүн зарыл болгон учурларда колдонулушу мүмкүн. Мисалы, экран, туурасы 1260 пиксел караганда аз болуп калса, эрежелер колдонулат, медиа суроо киргизилген болсо. Алар эмне кылсак болот? Биз кооз чөйрө толук илинип турган болсо, жана колдонуучу ал алынып салынды деп каттоодон Мындай учурларда ал мүмкүн болсо, бир аз экранды бар. долбоор болсо, медиа-суроо салат кандайдыр бир мааниде. Бирок өзгөчөлүк абдан чоң болуп саналат ... личность. Алар кээ бир серепчилер өлчөмү менен иш алып бардык өзгөрүүлөрдү жүзөгө ашырылышы үчүн жаза алат.

жыйынтыктоо

мобилдик түзмөктөрдүн саны, жана аны колдонгон адамдардын, ар дайым өсүп жатат. Ошондуктан, аны иштеп чыгуу башталганга чейин сайттын жайгашуусу, атүгүл майда-чүйдөсүнөн бери, түшүнүктөр сөз эмес, иштелип чыккан деп баалуу болуп саналат. Анткени, колдонуучулар сайт аппарат боюнча кирип, алар көрсөткөн жок болот жүктөлүп маалыматтарды эмес, камсыз кылуу үчүн зарыл. Эмне үчүн? Ооба, ал жөнөкөй - беттердеги БА жай жок эле. Ал маалыматтар чакан көлөмдөгү жүктөлөт, ал эми тез арада жана натыйжалуу сайт экенине ынануу үчүн жакшы болот.