Ако сте уеб разработчик или притежавате онлайн бизнес, може да ви е любопитно да разберете как изглежда мобилен сайт на настолен компютър. Външният вид и функционалността на вашия мобилен сайт могат да бъдат от решаващо значение, тъй като повече от половината от интернет трафика идва от телефони. По-вероятно е клиентите да останат на даден сайт по-дълго или да купят нещо, ако е визуално привлекателно. Изгледът на работния плот също може да ви помогне да правите редакции и да отстранявате възможни проблеми по-рано.
За щастие това е сравнително лесен процес. В тази статия ще ви покажем как да видите мобилна версия на уебсайт на различни устройства и браузъри.
Как да видите мобилната версия на уебсайт в Chrome на Mac
В Chrome можете да тествате предния край и да видите дали всички компоненти на уебсайта работят правилно, като използвате вграден инструмент за разработчици, наречен DevTools. Тъй като предоставя предварително дефиниран избор на устройство, DevTools е най-добрият начин за разработчика бързо да премести изгледа от настолен компютър към мобилен и обратно без никакви разширения за разработчици.
Можете също да промените размера на екрана, за да отговаря на вашите нужди, и да регулирате ширината и височината на екрана, за да видите как ще изглежда уебсайтът ви на различни размери на екрана. За да направите това на Mac, изпълнете следните стъпки:
- Стартирайте браузъра Google Chrome и отидете на сайта, който искате да видите.
- Натиснете F12 на клавиатурата си, за да получите достъп до DevTools.
- Когато режимът е включен, щракнете върху иконата за превключване на емулация на устройство.
- Можете да избирате от списък с устройства с iOS и Android, за да ги емулирате.
- Той ще покаже уебсайта в мобилната форма, която сте избрали.
Когато приключите, просто затворете прозореца с инструменти за разработчици, за да затворите мобилната версия на уебсайта.
Как да видите мобилната версия на уебсайт в Chrome на компютър с Windows
Ако искате да видите мобилна версия на уебсайт на Windows PC в Chrome, това е доста подобен процес:
- Отворете браузъра Chrome.
- В Chrome отидете на уебсайта, който искате да видите в мобилната версия.
- Щракнете с десния бутон върху уеб страницата и изберете Проверка от менюто.
- За да отидете на Инструменти за разработчици, щракнете върху раздела Още инструменти и изберете Инструменти за разработчици или натиснете F12, за да отворите DevTools.
- Ще се отвори прозорецът Инструменти за разработчици.
- Щракнете върху иконата за превключване на устройството, за да превключите към режима за преглед на мобилния сайт.
- Изберете мобилното устройство, което искате да емулирате (по избор).
- Вече можете да променяте размерите на екрана, за да отговарят на вашите нужди.
Как да видите мобилната версия на уебсайт в Chrome на Chromebook
Достъпът до мобилната версия на уебсайт в Chrome с помощта на Chromebook е много подобен на първите два метода.
- Отворете уеб браузъра Google Chrome.
- Отворете уеб страницата, до която искате да получите достъп на мобилното си устройство.
- За достъп до менюто щракнете върху вертикалната икона с три точки.
- Плъзнете мишката върху елемента Още инструменти в списъка.
- Изберете Инструменти за разработчици.
- Ще се отвори прозорецът Инструменти за разработчици в браузъра.
- Превключете режима за преглед на мобилния сайт, като щракнете върху иконата за превключване на устройството.
Това ще изведе потребителския интерфейс за мобилния сайт. Можете също да изберете предпочитаното устройство, като изберете марката и модела от падащото меню. Уеб страницата ще се опреснява като настолен сайт всеки път, когато затворите конзолата с инструменти за разработчици.
Как да видите мобилната версия на уебсайт във Firefox на Mac
Можете да използвате други уеб браузъри като Firefox, за да видите мобилен сайт на настолен Mac. Преоразмеряването на прозореца на браузъра е един от методите, които повечето уеб разработчици използват, за да оценят уебсайта с отзивчив дизайн. Въпреки това, през повечето време тази алтернатива няма да изглежда приемлива.
Точно тук са полезни възможностите за уеб разработка на браузъра Firefox. Можете да разглеждате уеб страниците си в различни разделителни способности, ако знаете как да получите достъп до мобилни версии на уебсайтове във Firefox. Следвай тези стъпки:
- Отворете мобилната версия на уебсайта, който искате да видите.
- Щракнете с десния бутон върху уеб страницата и изберете опцията Проверка от менюто.
- Изберете режима на адаптивен дизайн.
- Изберете размера на екрана на уебсайта.
Как да видите мобилната версия на уебсайт във Firefox на компютър с Windows
Компютрите с Windows също имат възможност да преглеждат мобилни версии на уебсайтове с помощта на Firefox. Ето как да го направите:
- Стартирайте Firefox на вашия компютър.
- Отидете на уебсайта, който искате да видите като мобилна версия.
- Отидете в Настройки, като щракнете върху хоризонталната икона с три ленти.
- Ще видите падащо меню, където ще трябва да изберете опция за уеб разработчик.
- Изберете режим на адаптивен дизайн.
- И накрая, можете да изберете модел смартфон, за да видите как ще изглежда вашият сайт на това устройство.
Как да видите мобилната версия на уебсайт в Safari на Mac
Разгледахме как да видите мобилен уебсайт на настолен компютър с помощта на Chrome и Firefox. Но какво да кажем за браузъра по подразбиране, който се предлага с Mac устройства, Safari? За щастие е възможно да видите и мобилна версия на уебсайт в Safari.
- Стартирайте браузъра Safari.
- Отидете на уебсайта, който искате да видите като мобилна версия.
- Щракнете върху Опции и след това върху менюто Разработка.
- От падащото меню изберете Enter Responsive Design Mode.
- Вече можете да видите мобилната версия на уебсайта.
Допълнителни ЧЗВ
Мога ли да видя настолната версия на уебсайт на моя телефон?
Отговорът е да! Можете да превключите от мобилната версия към настолната версия, за да я проверите, без да използвате компютър. Стъпките за преместване на мобилната версия към настолната версия в Chrome са както следва:
1. Отидете на уебсайта, който искате да видите в изглед на работния плот.
2. Докоснете иконата с три точки, за да влезете в менюто.
3. Изберете опцията Desktop View сега.
Имайте предвид, че тези стъпки могат да варират в зависимост от телефона, който използвате.
как да се подобри съдбата
Улесняване на дизайна на мобилен уеб
Инструментите за разработчици са чудесни за анализиране и модифициране на мобилна версия на уебсайт на настолен компютър без превключване на устройства. Можете да промените размера на екрана, за да наблюдавате как функционират компонентите на различни устройства. Можете да настроите различни компоненти и да създадете уебсайта за различни размери на екрана, като използвате режима на реакция.
Когато проектира уебсайт, дизайнерът винаги трябва да има предвид как се появява предната част на сайта на телефони, таблети и настолни компютри. Използването на методите, описани в статията, може също да помогне на разработчика да го направи, както и да идентифицира кои компоненти на уебсайт създават проблеми, за да ги коригира.
Опитвали ли сте някога да гледате мобилна версия на сайт на вашия работен плот? Кой браузър предпочитате да използвате за това? Уведомете ни в секцията за коментари по-долу.
