Как открыть мобильную версию сайта на компьютере
Обновлено: 07.07.2024
К разработке мобильной версии сайта можно подойти по-разному: создать отдельный стиль или полностью переработать дизайн и html-разметку. Но в обоих случаях важно определить, когда загружать мобильную версию сайта, а когда – компьютерную. Это можно сделать несколькими способами.
1. На стороне сервера
В случае, когда мобильная версия расположена на отдельном доменном имени, можно использовать файл meta.txt. В нем указываются точки входа для мобильной и компьютерной версий.
Точки входа для компьютерной и мобильной версий определяются в строчках pc и mobile соответственно.
- новые браузеры появляются очень часто, соответственно пополнять список UserAgent придется постоянно;
- далеко не всегда UserAgent определяется правильно.
2. На стороне клиента
а) Указывать атрибут media
< link rel ="stylesheet" href ="site.css" media ="screen" />
<br> < link rel ="stylesheet" href ="mobile.css" media ="handheld" />
Значение «screen» соотвествует обычному компьютеру, «handheld» — это мобильное устройство.
- иногда загружаются оба файла стилей (и screen и handheld);
- не поддерживается многими современными устройствами.
б) Использовать запросы внутри атрибута media
Чаще всего стили загружаются в зависимости от ширины устройства:
< link rel = "stylesheet" href = "mobile.css" media = "only screen and (max-device width:480px)" />
Вообще с помощью таких запросов можно много чего определить: ширину и высоту окна браузера или устройства, ориентацию (портретная или ландшафтная), разрешение и т.п.
Минус: не поддерживаются многими старыми устройствами.
в) Комбинирование методов
Так как оба вышеописанных способа не поддерживаются рядом устройств, умные люди придумали комбинировать их:
< link rel = "stylesheet" href ="handheld.css" media ="handheld,only screen and (max-device-width:480px)" />
3. Выбор пользователя
Можно предоставить право выбора пользователю и ничего не определять, а просто сделать ссылку на мобильную версию сайта.
Заключение
Если мобильная версия сайта отличается от компьютерной только стилями, то подходят все вышеописанные варианты. Если же html-разметка для мобильной версии отличается от компьютерной, то 2 способ не является решением.
Некоторые мобильные сайты более удобны в использовании, чем те, что открываются в десктопных браузерах. К счастью, можно сделать так, чтобы в Chrome появился выбор, какой сайт вам хочется открыть: мобильный или десктопный. Как это сделать?
Откройте на компьютере браузер Google Chrome, перейдите в Chrome Web Store, найдите расширение User-Agent Switcher и установите его. На адресной панели Chrome появится кнопка этого расширения, которая выглядит как глобус. Нажмите на неё и в выпадающем меню выберите новый User-Agent — Android > Samsung Galaxy S3 или iOS > iPhone. Активная вкладка перезагрузится и перед вами будет мобильная версия сайта. Имейте в виду, что User-Agent будет меняться для всех сайтов, а не только для той вкладки, что была открыта.
Для отключения подменного User-Agent нужно ещё раз нажать на кнопку расширения и выбрать Default. В этом случае браузер будет передавать сайтам свои собственные данные, не притворяясь приложением, установленным на другое устройство.
В каких случаях вам могут понадобиться мобильные версии сайтов на десктопном компьютере? Например, в тех, когда важно расходовать меньше трафика. Кроме того, мобильные сайты, как правило, работают быстрее и у них менее перегруженный интерфейс, близкий к мобильным приложениям. Веб-мастера используют подмену User-Agent для того, чтобы посмотреть, как их сайты выглядят на разных платформах и на экранах с разными соотношениями сторон. Для этого им не нужно покупать отдельные устройства, достаточно просто открыть сайт в Chrome и с помощью расширения выбрать нужный гаджет. Ещё одна немаловажная деталь: некоторые мобильные сайты предлагают дополнительную функциональность, недоступную на их десктопных версиях. Например, в скором времени Instagram позволит загружать фотографии через мобильный сайт, а подменив User Ager, вы сможете делиться снимками прямо с компьютера, предварительно обработав их в графическом редакторе.
Как посмотреть мобильную версию сайта на компьютере
Для того, чтобы оценить качество отображения вашей мобильной версии сайта, вам нет необходимости иметь кучу мобильных устройств, вам достаточно будет иметь нужный браузер и знать волшебную кнопку в нем.
Я для таких вещей использую браузер Google Chrome, во первых он удобный и быстрый, а во вторых в нем есть все, что нужно веб дизайнеру и разработчику. Откройте в браузере ваш сайт и нажмите клавишу F12.
Благодаря этому действию я смогу посмотреть страницу в мобильной версии и оценить качество ее отображения. Ваш экран поделиться на две половины, в левой вы увидите мобильное отображение, а справа элементы загружаемые на странице.
В верхнем углу вы увидите модель текущего телефона который отображает ваш ресурс. Нажав на него вы увидите расширенный список в котором будут присутствовать и iPhone последних моделей, так и Lumia на Microsoft Windows 10.
Как видите я спокойно на своем компьютере вижу мобильную версию сайта с iPhone 8
Если нажать кнопку Edit, то вы сможете выбрать более масштабный список мобильных устройств, предыдущих поколений. Как видите, все очень просто, главное помнить кнопку F12. Для выхода из текущего режима, нужно нажать ее же. Если есть вопросы, то пишите их в комментариях, постараюсь на них ответить.
Узнайте, как загрузить сайт мобильного просмотра в браузере Microsoft Edge для настольных ПК. Инструменты разработчика помогают автоматически изменять размер рабочего стола до маленьких экранов.
Неделей ранее моя лучшая подруга, которая ведет собственный блог, хотела посмотреть, как ее блог выглядит для читателей на различных устройствах. По ее словам, это помогает ей отслеживать внешний вид своего блога с разных точек зрения. Это лучший способ проанализировать его производительность.
Microsoft Edge Chromium имеет встроенную консоль инструментов разработчика, которая позволяет легко переключаться между мобильным представлением, сайтом для планшета и полноэкранным режимом рабочего стола без каких-либо расширений.
Вы также можете выбрать адаптивный режим и изменить размер экрана, чтобы проверить реакцию веб-сайта на экранах разных размеров. Edge обеспечит идеальную мобильную работу и навигацию из настольного браузера.
Как просмотреть мобильный сайт на пограничном компьютере?
Вот шаги, чтобы просмотреть мобильное представление Microsoft Edge:
- Запустите браузер Microsoft Edge на компьютере.
- Откройте веб-сайт, который вы хотите просмотреть, на мобильном сайте.
- Нажмите на меню для опций.
- Наведите указатель мыши на параметр «Дополнительные инструменты» в списке.
- В меню «Дополнительные инструменты» выберите «Инструменты разработчика».
- В браузере откроется панель инструментов разработчика.
- Щелкните значок переключения устройства, чтобы включить режим просмотра мобильного сайта.
Это загрузит пользовательский интерфейс мобильного сайта. Вы также можете выбрать модель устройства из раскрывающегося меню типа устройства, чтобы выбрать желаемое устройство. Вид кромки предоставляет различные варианты на выбор!
Как только вы закроете консоль инструментов разработчика, веб-сайт перезагрузится как сайт для настольных компьютеров.
Итог: Microsoft Edge Mobile View
Браузер Microsoft Edge помогает в предварительном просмотре мобильного сайта в браузере настольного компьютера. Вы можете использовать инструменты разработчика, чтобы включить адаптивный режим в Edge для тестирования макета представления мобильного сайта. В инструментах разработчика также есть возможность выбрать предустановленное мобильное производство и макеты тестовых экранов.
Лично, когда я вношу какие-либо изменения в этот блог, я стараюсь увидеть эффект на экранах разных размеров. Следовательно, инструменты разработчика на компьютере Edge помогают во включенном просмотре мобильного сайта. Я также перетаскиваю полосу изменения размера, чтобы настроить и проверить макет экрана. Это также помогло моей лучшей подруге проанализировать то же самое для ее блога. Это дало ей более глубокое представление о сознании зрителей. Таким образом, Edge Mobile View может помочь нам обоим!
Точно так же вы также можете переключиться на просмотр сайта на рабочем столе в пограничном браузере Android. Это загрузит полноценный рабочий стол на периферийном мобильном устройстве.
Что вы думаете об использовании просмотра мобильного сайта на пограничном компьютере? В каких случаях вы используете эту функцию?
Наконец, вот рекомендуемые веб-браузеры для вашего компьютера и мобильного телефона, которые вам стоит попробовать.
Читайте также: