Ако сте веб програмер или имате онлајн бизнис, можда ћете бити радознали да сазнате како мобилна локација изгледа на десктопу. Изглед и функционалност вашег мобилног сајта могу бити од кључне важности јер више од половине интернет саобраћаја долази са телефона. Вероватније је да ће купци дуже остати на сајту или купити нешто ако је визуелно привлачно. Приказ радне површине такође вам може помоћи да извршите измене и раније решите могуће проблеме.
На срећу, ово је релативно једноставан процес. У овом чланку ћемо вам показати како да видите мобилну верзију веб локације на различитим уређајима и прегледачима.
Како да погледате мобилну верзију веб локације у Цхроме-у на Мац-у
У Цхроме-у можете да тестирате предњи крај и видите да ли све компоненте веб локације функционишу исправно помоћу уграђене алатке за програмере под називом ДевТоолс. Пошто пружа унапред дефинисане изборе уређаја, ДевТоолс је најбољи начин да програмер брзо промени поглед са десктопа на мобилни и обрнуто без икаквих проширења за програмере.
Такође можете променити величину екрана да одговара вашим потребама и прилагодити ширину и висину екрана да бисте видели како ће ваша веб локација изгледати на различитим величинама екрана. Да бисте то урадили на Мац-у, следите ове кораке:
- Покрените прегледач Гоогле Цхроме и идите на сајт који желите да видите.
- Притисните Ф12 на тастатури да бисте приступили ДевТоолс-у.
- Када је режим укључен, кликните на икону Тоггле Девице Емулатион.
- Можете бирати са листе иОС и Андроид уређаја да бисте их опонашали.
- Приказаће веб локацију у мобилном облику који сте одабрали.
Када завршите, само затворите прозор алата за програмере да бисте затворили мобилну верзију веб локације.
Како да погледате мобилну верзију веб локације у Цхроме-у на Виндовс рачунару
Ако желите да видите мобилну верзију веб локације на Виндовс ПЦ-у у Цхроме-у, то је прилично сличан процес:
- Отворите прегледач Цхроме.
- У Цхроме-у идите на веб локацију коју желите да видите у мобилној верзији.
- Кликните десним тастером миша на веб страницу и у менију изаберите Инспецт.
- Да бисте отишли на Алатке за програмере, кликните на картицу Још алата и изаберите Алатке за програмере или притисните Ф12 да бисте отворили ДевТоолс.
- Отвориће се прозор Алати за програмере.
- Кликните на икону за укључивање/искључивање уређаја да бисте се пребацили на режим приказа мобилног сајта.
- Изаберите мобилни уређај који желите да опонашате (опционо).
- Сада можете да измените димензије екрана како би одговарале вашим потребама.
Како да погледате мобилну верзију веб локације у Цхроме-у на Цхромебоок-у
Приступ мобилној верзији веб локације у Цхроме-у помоћу Цхромебоок-а је веома сличан прва два метода.
- Отворите веб прегледач Гоогле Цхроме.
- Отворите веб страницу којој желите да приступите на свом мобилном уређају.
- Да бисте приступили менију, кликните на вертикалну икону са три тачке.
- Превуците мишем преко ставке Још алата на листи.
- Изаберите Алатке за програмере.
- Отвориће се прозор Алати за програмере у претраживачу.
- Укључите режим приказа мобилног сајта тако што ћете кликнути на икону за пребацивање уређаја.
Ово ће приказати кориснички интерфејс за мобилну локацију. Такође можете изабрати жељено искуство уређаја тако што ћете изабрати марку и модел из падајућег оквира. Веб страница ће се освежити као веб локација за радну површину кад год затворите конзолу алатки за програмере.
Како да погледате мобилну верзију веб локације у Фирефок-у на Мац-у
Можете да користите друге веб претраживаче као што је Фирефок да видите мобилну локацију на Мац рачунару. Промена величине прозора претраживача је један од метода које већина веб програмера користи за процену веб локације са респонзивним дизајном. Међутим, већину времена ова алтернатива неће изгледати прихватљива.
Ту су корисне могућности веб развоја претраживача Фирефок. Можете да претражујете своје веб странице у више резолуција ако знате како да приступите мобилним верзијама веб локација у Фирефок-у. Пратите ове кораке:
- Отворите мобилну верзију веб локације коју желите да видите.
- Кликните десним тастером миша на веб страницу и изаберите опцију Инспецт из менија.
- Изаберите Режим респонзивног дизајна.
- Изаберите величину екрана веб странице.
Како да погледате мобилну верзију веб локације у Фирефок-у на Виндовс рачунару
Виндовс рачунари такође имају могућност прегледа мобилних верзија веб локација користећи Фирефок. Ево како то учинити:
- Покрените Фирефок на свом рачунару.
- Идите на веб локацију коју желите да видите као мобилну верзију.
- Идите на Подешавања кликом на хоризонталну икону са три траке.
- Видећете падајући мени у коме ћете морати да изаберете опцију веб програмера.
- Изаберите Режим респонзивног дизајна.
- Коначно, можете да изаберете модел паметног телефона да видите како ће се ваша веб локација појавити на том уређају.
Како да погледате мобилну верзију веб локације у Сафарију на Мац-у
Покрили смо како да прегледате мобилну веб локацију на десктопу помоћу Цхроме-а и Фирефок-а. Али шта је са подразумеваним претраживачем који долази са Мац уређајима, Сафари? Срећом, могуће је погледати и мобилну верзију веб странице у Сафарију.
- Покрените претраживач Сафари.
- Идите на веб локацију коју желите да видите као мобилну верзију.
- Кликните на Опције, а затим на мени Развој.
- У падајућем менију изаберите Ентер Респонсиве Десигн Моде.
- Сада можете погледати мобилну верзију веб локације.
Додатна често постављана питања
Могу ли да погледам верзију веб локације за рачунар на свом телефону?
Одговор је да! Можете да пређете са мобилне верзије на верзију за десктоп да бисте је проверили без коришћења рачунара. Кораци за пребацивање мобилне верзије на верзију за десктоп у Цхроме-у су следећи:
1. Идите на веб локацију коју желите да видите у приказу радне површине.
2. Додирните икону са три тачке да бисте приступили менију.
3. Сада изаберите опцију Десктоп Виев.
Имајте на уму да се ови кораци могу разликовати у зависности од телефона који користите.
Виндовс 10 мени Старт и поставке не раде
Олакшавање дизајна мобилног веба
Алати за програмере су одлични за анализу и модификацију мобилне верзије веб локације на десктопу без промене уређаја. Можете да промените величину екрана да бисте видели како компоненте функционишу на различитим уређајима. Можете да прилагодите различите компоненте и да креирате веб локацију за више величина екрана користећи респонзивни режим.
Када дизајнира веб локацију, дизајнер увек треба да има на уму како се предњи део сајта појављује на телефонима, таблетима и десктоп рачунарима. Коришћење метода описаних у чланку такође може помоћи програмеру да то уради, као и да идентификује које компоненте веб локације стварају проблеме да их поправи.
Да ли сте икада покушали да погледате мобилну верзију сајта на свом десктопу? Који претраживач више волите да користите за то? Обавестите нас у одељку за коментаре испод.
