Как я могу рассматривать * одну * вкладку в браузере на настольном компьютере как мобильную?

Question

Я хочу иметь возможность одновременно запускать две вкладки на одном веб-сайте в одном браузере. Первая вкладка должна работать нормально и получать настольные версии. Вторая вкладка будет рассматриваться как мобильный браузер и получать мобильные версии.

Как я могу это сделать?

редактировать

Видимо я сделал плохую работу, спрашивая. Я хочу знать, как у меня может быть одно окно браузера с двумя вкладками. Первая вкладка использует версию для ПК, вторая - мобильную версию. Надеемся, что скриншот ниже может помочь проиллюстрировать.

Answer 1

Firefox предоставляет функцию Responsive Design View для просмотра того, как веб-сайты выглядят на устройствах разных размеров, таких как мобильные телефоны и планшеты.
Ознакомьтесь с руководством разработчика Firefox Responsive Design View

Чтобы активировать Resposive Design View, используйте Ctrl+Shift+M

Answer 2

Firefox не может легко сделать это без использования какого-либо плагина, такого как Firebug. Если вы не привязаны к Firefox, это очень легко сделать в Chrome, используя встроенные средства разработчика. Они включают вкладку Эмулятор, которая позволяет выбрать устройство (мобильное или планшетное) для эмуляции. Это не идеальное представление, но оно заставит сайт поверить, что вы эмулируемое устройство.

Answer 3

Вероятно, я бы посмотрел на переключатели UserAgent, возможно, на этот. В зависимости от того, как веб-сайт обнаруживает "мобильный", вам может потребоваться изменить другие заголовки клиентских запросов, возможно, заголовок размера экрана.

Вы можете проверить строку пользовательского агента вашего мобильного браузера, чтобы иметь возможность эффективно клонировать ее.

Одно предостережение, что для мобильных устройств могут существовать предположения, например, что вы находитесь на небольшом экране мобильного устройства, и на экране размером с рабочий стол это будет выглядеть ужасно. Попробуйте, дайте нам знать :).

Answer 4

Это полностью зависит от того, как вы отделили свой контент на рабочем столе от мобильного контента на стороне сервера.

• Вы используете www.example.com и mobile.example.com?
• Используете ли вы медиа-запросы в вашем CSS?
• Вы просто загружаются style.css и mobile.style.css условно?