Главни проблем у вези са променом ХТМЛ оквира приказа на величину паметног телефона је тај што може довести до тога да веб локација не реагује или се приказује неправилно. То је зато што када се прозор за приказ промени, веб локација можда неће бити оптимизована за мању величину екрана и можда неће моћи правилно да смањи свој садржај. Поред тога, неке функције можда неће радити исправно на мањој величини екрана, као што су менији за навигацију или интерактивни елементи.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. Ова линија кода је мета ознака, која претраживачу пружа информације о ХТМЛ документу.
2. Атрибут наме је постављен на „виевпорт“, што говори претраживачу да ова ознака садржи информације о томе како страница треба да буде приказана на различитим уређајима.
3. Атрибут садржаја је подешен на „видтх=девице-видтх, инитиал-сцале=1.0“, што говори претраживачу да треба да користи ширину уређаја као ширину странице и да је повећа или смањи одатле ако је потребно.
Одзивни веб дизајн
Респонзивни веб дизајн је приступ веб дизајну који омогућава да се веб странице добро приказују на различитим уређајима и величинама прозора или екрана. Користи комбинацију флексибилних мрежа и распореда, слика и интелигентну употребу ЦСС медијских упита. Респонзивне веб странице су дизајниране да обезбеде оптимално искуство гледања—лако читање и навигацију уз минимално мењање величине, померања и померања—на широком спектру уређаја (од монитора стоних рачунара до мобилних телефона).
У ХТМЛ-у, респонзивни дизајн се може постићи коришћењем следећих техника:
• Флексибилне мреже – Коришћење релативних јединица као што су проценти или емс уместо јединица фиксне ширине као што су пиксели за елементе изгледа омогућава да се страница флексибилно прилагоди различитим величинама екрана.
• Медијски упити – ЦСС3 медијски упити омогућавају програмерима да специфицирају различите стилове за различите ширине уређаја. Ово омогућава да се изглед странице у складу са тим прилагоди у зависности од уређаја који се користи.
• Респонзивне слике – Слике се могу учинити прилагодљивим коришћењем атрибута срцсет у ХТМЛ5 који омогућава програмерима да наведу више верзија слике у различитим резолуцијама за различите уређаје.
• Флексибилни видео снимци – Видео снимци се такође могу учинити прилагодљивим коришћењем својства прилагодбе објекта у ЦСС-у које омогућава програмерима да одреде како видео снимци треба да се скалирају унутар својих контејнера у зависности од њихове величине.
Мета ознака Виевпорт
Мета ознака области приказа је ХТМЛ елемент који говори претраживачу како да прилагоди димензије и скалирање странице тако да одговарају уређају који се користи. Користи се за контролу како веб страница изгледа на различитим уређајима, као што су паметни телефони и таблети. Мета ознака области приказа може да се користи за подешавање ширине веб странице, повећање или смањење величине и одређивање да ли је корисницима дозвољено да увећавају или умањују приказ. Такође се може користити за постављање почетне размере, максималне размере, својства која могу да подесе корисник и још много тога.
Како да учиним да моја веб локација одговара екрану мог телефона
Да бисте веб локацију прилагодили екрану телефона у ХТМЛ-у, можете да користите мета ознаку области приказа. Ова ознака вам омогућава да контролишете како се ваша веб локација приказује на различитим уређајима. Можете да подесите ширину оквира за приказ да буде једнака ширини уређаја, тако да ће ваша веб локација аутоматски прилагодити своју величину тако да одговара екрану било ког уређаја. Поред тога, можете да користите и медијске упите у свом ЦСС коду да бисте додатно прилагодили како ваша веб локација изгледа на различитим уређајима.
