Подтвердить что ты не робот

Можно ли эмулировать ориентацию в браузере?

Как название можно эмулировать ориентацию в google chrome или firefox? Значение как-то изменит браузер для поддержки медиа-запросов (ориентация = (пейзаж или портрет))

У меня есть эмулятор для мобильных устройств, но я хотел бы иметь инструменты разработчика от хром или firebug.

Update

Chrome v25 specific...

Кому-нибудь, в Google Chrome Dev Tool > Overrides > Override Device Orientation, вы можете изменить alpha, beta и gamma. Я думаю, что это место для начала, но я понятия не имею, как это работает, и может там ничего не найти.

Также возможно Эмулировать CSS-носители, но не портрет и пейзаж, а печать, экран, телевидение и т.д.

Обновление v2

Это старый вопрос, и Chrome несколько раз менял, как это сделать.

4b9b3361

ОТВЕТЫ

Ответ 1

Обратитесь к K. Алан Бэйтс отвечает для объяснения более поздних функций и обновлений эмуляции Chrome.

Можно ли эмулировать ориентацию в браузере?




Эмуляция типов носителей

Откройте панель инструментов веб-инструментов Chrome (F12 или, тем не менее, вы ее откроете) Нажмите маленькую звездочку в правом верхнем углу окна инструментов разработчика (внизу справа в предыдущих версиях хром). В разделе Настройки нажмите Переопределить. Затем отметьте флажок рядом с Emulate CSS Media, а затем выберите, какой медиа-объект вы хотите имитировать из выпадающего списка.

enter image description here

Эмуляция изменений ориентации

Взгляните на этот jsfiddle и измените размер выходного кадра - он переключит фоны в зависимости от ориентации браузера.

body {
    background-position: top center;
}

@media screen and (orientation: portrait) {
    body { background-image: url('http://petapixel.com/assets/uploads/2013/01/vangough.jpg'); }
}
@media screen and (orientation: landscape) {
    body { background-image: url('http://cdn-media.hollywood.com/images/l/BobRoss2_620_102912.jpg'); }
}

Ответ 2

В Chrome Dev Tools: если вы перейдете к Настройки > Переопределения > Метрики устройства

Если вы измените размеры разрешения экрана, ориентация изменится и произойдет событие changechange-event.

Ориентация зависит от соотношения между "width" и "height" . Если "высота" имеет более высокое значение, чем "ширина", браузер будет находиться в ориентации: "портрет", и наоборот.

высотa > ширина = портрет
высота < width = landscape

Ответ 3

Я уверен, что другие выяснили, как эмулировать ориентацию в Chrome к настоящему времени, но я столкнулся с этим сообщением и хотел добавить инструкции для тех, кто все еще ищет помощь.

Это на самом деле довольно просто.

Эти инструкции являются текущими как

Chrome Stable 34.0.1847.131

В Chrome Dev Tools (внутри Chrome, нажмите F12, чтобы открыть Chrome Dev Tools) перейдите на вкладку "Эмуляция" .
Выберите устройство, которое вы хотите эмулировать из выпадающего списка, и нажмите "Эмуляция" . Когда вы эмулируете, раздел "Экран", который находится в списке разделенных разделов слева от вкладки "Эмуляция" , получает галочку, указывающую, что она активна. Выберите его.

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

Некоторые другие важные вещи, которые вы можете сделать в эмуляторе Chrome Dev Tools

Вы можете:

  • Эмуляция коэффициента пикселя устройства
  • Эмуляция типов носителей CSS (шрифт Брайля, рельефный, ручной, печать, проекция, экран, речь, tty, tv: см. RFC 2534 и соответствующие документы для более подробной информации)
  • Пользовательский агент Spoof: вы можете заставить Chrome "олицетворять" другие браузерные механизмы.
  • Эмуляция сенсорного экрана (это не идеально, но это приятное прикосновение (< = rimshot))
  • Эмуляция координат геолокации (включая эмуляцию "недоступность позиции" )
  • Эмуляция акселерометра

Мой личный совет для развития в портретной ориентации

Предполагая, что у вас есть монитор 16: 9, вращающийся стенд VESA и драйверы, которые поддерживают изменение ориентации (вы можете найти это в настройках экрана "Разрешение экрана Windows". Если есть раскрывающийся список "Ориентация", вы можете повернуть ваш взгляд)

Физически поверните экран, затем поверните дисплей в Windows (вы также можете [Ctrl] [Alt] [Стрелка влево], чтобы повернуть дисплей). Эмулируйте портретную ориентацию, как я уже упоминал выше, и установите коэффициент пикселя устройства равным 1. Это увеличит эмуляцию вашего мобильного устройства до полного размера экрана. Он не будет инициировать мобильный макет без какой-либо дополнительной помощи, но мультимедийные запросы на основе em позволят вам [Ctrl] [+] увеличить значение Chrome em для запуска вашего мобильного макета.

Использование эмуляции Dev Tools позволяет аппроксимировать интерфейс сенсорного экрана без сенсорного экрана.

Он также позволяет вам иметь любой размер монитора 16: 9 для отображения "широкоэкранного" мобильного макета. Естественно, монитор 16:10 позволит вам эмулировать макеты 10:16 без изменения размера браузера.

Единственная особенность, которую я действительно хочу видеть в Google, добавляет, что это способность во время эмуляции "двойного касания" автоматически изменяет размер окна. Это не поддерживается в настоящее время.

Ответ 4

Я использую консоль и вводю эту строку

window.dispatchEvent(new Event('orientationchange'));

он будет запускать событие changechange и, следовательно, запускать любые прослушиватели событий, которые у вас есть в script.

Ответ 5

Поскольку @MrOggy85 заявила, что ориентация определяется высотой и шириной браузера. Вы можете эмулировать это в firefox через Инструменты > Веб-разработчик > Отзывчивый дизайн, это позволяет выбирать общие размеры экрана и позволяет перевернуть ориентацию. Надеюсь, это поможет?

Ответ 6

Здесь много ответов, но я думаю, что Chrome, возможно, немного изменился, и это не слишком сложно. Перейдите в Инструменты разработчикa > Эмуляция в Chrome. Существует 4 суб-вкладки: устройство, экран, агент пользователя и датчики. В разделе Устройство вы можете выбрать свое устройство (например, "Apple iPad 1/2/Apple Mini" ). Если вам нужно смоделировать ориентацию подкачки, просто зайдите в подтекст Экран, а там небольшая кнопка со стрелками, идущими влево и вправо, чтобы поменять ориентацию. Просто нажмите эту кнопку.

Ответ 7

Легко!!! представление по умолчанию - это портрет, если вы эмулируете устройство (несмотря на запрос css media портрета) вы можете просто обрабатывать разрешения, вот этот образ в документации Google https://developer.chrome.com/devtools/docs/mobile-emulation/device_metrics.png

Просто нажмите стрелки между РАЗРЕШЕНИЕМ Width и Height и DONE!!

Enjoy

Ответ 8

Изменения ориентации устройства могут быть эмулированы в Chrome. Просто перейдите в меню "Настройки", которое можно открыть с помощью значка cog в правой нижней части инструментов разработчика и выберите вкладку "Переопределения". Установите флажок "Переопределить ориентацию устройства" и введите новые значения в поля ввода.

Альфа представляет движение устройства вокруг оси z от 0 до 360 градусов. Бета представляет движение устройства вокруг оси х от -180 до 180 градусов - движение вперед-назад. Гамма представляет движение устройства вокруг оси y от -90 до 90 - движение слева направо. Изменение значений приведет к событию ориентации устройства.

Надеюсь, что это будет полезно.

Ответ 9

На вкладке эмуляции просто нажмите кнопку экрана слева и на кнопке между 320 и 568, чтобы вы переключали разрешения! которые будут эмулировать портретный и альбомный режим.

Ответ 10

Бит поздно, но это тоже работает на Google Chrome.

Откройте firebug и щелкните значок телефона, после которого вы можете выбрать модель устройства, в которой хотите видеть приложение.

Что-то вроде этого

enter image description here

Затем перейдите в resolution в свойствах emulation, как показано на рисунке выше. (Правый нижний угол) Теперь щелкните значок двойной стрелки в том же свойстве resolution. Вы должны увидеть что-то вроде этого

enter image description here

Посмотрите, что высота и ширина были заменены и, следовательно, повернуты:)

Надеюсь, что это поможет.

Ответ 11

Для последнего Chrome (версия 62) он полностью изменен.

  • Переключить инструменты разработчика.
  • Нажмите правое верхнее меню "Настроить и управлять DevTools".
  • Пройдите еще инструменты → Датчики.
  • Измените ориентацию на пейзаж влево или вправо как обычно.

Ответ 12

Просто измените контекст перед установкой ориентации....

driver.context("NATIVE_APP");
driver.rotate(ScreenOrientation.LANDSCAPE);
driver.context("WEBVIEW_1");