Проверьте, как мой сайт отображается на разных устройствах - PullRequest
Новая
       21

Проверьте, как мой сайт отображается на разных устройствах

0 голосов
/ 05 марта 2019

У меня есть веб-сайт nuxt.js, и я заметил, что когда я открываю свой сайт на телефоне друга (что-то от Huawei), изображения не отображаются и кажутся испорченными.

Мой вопрос: есть ли способ проверить, как мое веб-приложение выглядит на разных устройствах?Что-то вроде Трэвиса, но для пользовательского интерфейса?

Например, я хочу проверить, нормально ли отображается мой сайт на всех телефонных устройствах Huawei.Есть ли способ сделать это?Как получить скриншот для каждого из них?Может быть, услуга?

Ответы [ 2 ]

1 голос
/ 05 марта 2019

Самый простой способ проверить, как все будет работать на мобильных устройствах, был бы с F12 Developer Tools 'отзывчивым режимом ( F12 затем CTRL + SHIFT + M ). Это поставляется с предустановленным несколькими обычными устройствами, но вы можете добавить свои собственные размеры. И вы можете получить список типичных размеров экрана устройства для этого из ScreenSiz.Es .

Если Инструменты разработчика не будут обрезать его, и вам нужно посмотреть, как устройство выглядит на реальном эмулируемом телефоне, существуют бесплатные веб-сайты, которые могут эмулировать несколько устройств, например MobileTest. Me .

И есть также платные альтернативы, такие как BrowserStack (которые могут делать такие вещи, как снимки экрана и доступ к журналам устройства), если вы ищете что-то более всестороннее.

0 голосов
/ 28 марта 2019

Существует причина, по которой вы наблюдали, поскольку разные устройства и браузеры отображают каждую веб-страницу по-разному.Чтобы проверить, как ваш сайт выглядит на разных устройствах, вы можете сделать следующее:

  1. Вы можете использовать платформу для кросс-браузерного тестирования, такую ​​как LambdaTest , в которой вы можете делать скриншоты на разныхустройства, а также вы можете выполнять живое тестирование на различных устройствах.

введите описание изображения здесь

Если вы хотите тестировать в разных разрешениях, то вместе с инструментом вы можете сделать это прямо из браузера Chrome.Для этого:

a) Нажмите на элемент проверки в вашем браузере или нажмите (Ctrl + Shift + I) на клавиатуре.

b) Нажмите на значок Переключить устройство между выбранными элементами и «Элементами» введите описание изображения здесь

c) Теперь вид вашеговеб-страница будет меняться в зависимости от выбранного разрешения.Вы можете выбрать из списка, или вы также можете ввести свое собственное разрешение в соответствии с устройством. введите описание изображения здесь

Дайте мне знать, если это поможет!

...