如何在chrome emulator中测试motorola中的网站?

man*_*ack 0 testing html5 cross-browser css3

我在Chrome中的所有移动模拟器中测试我的网站.

在此输入图像描述

这里没有moto g模拟器.我的测试团队在moto g中说问题.有人可以帮助如何测试摩托罗拉.

提前致谢.

Ste*_*ith 7

我认为Mibit不太正确。虽然Moto G的屏幕分辨率可能为720 x 1280,但网站不会以该分辨率显示。

CSS规范定义了所谓的参考像素,该参考像素允许具有高密度显示器的设备以与具有较低像素密度的显示器类似的大小显示相同的内容。参考像素用于所有CSS和网站渲染,并确定视口大小。

例如,MotoG3的视口大小为360x640。设备像素比率为2,这意味着Web看到的每个CSS像素实际上是2个物理屏幕像素宽的,或由4个物理像素表示的。这就是为什么Chrome仿真MotoG3的正确仿真器设置为:

屏幕尺寸: 360x640px

设备像素比率: 2

用户代理(可能因浏览器而异): Mozilla/5.0 (Linux; Android 6.0.1; XT1540 Build/MMB29U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.81 Mobile Safari/537.36

为了显示在模拟器中使用物理屏幕分辨率和参考像素分辨率之间的区别,以下屏幕截图显示了这两种配置下google的外观:

使用720x1280px

使用正确的360x640px

您可以清楚地看到使用360x640px和DPR为2可以正确模拟手机屏幕上显示的内容


小智 5

"仿真器"唯一能做的就是模拟屏幕分辨率和像素尺寸.

自定义屏幕设置:

自定义屏幕资源

单击值并调整它们.Moto G具有720 x 1280像素的重新分辨率,并将像素尺寸设置为2或3.

自定义设备

如果找到边缘案例或小众设备,您可以添加自定义设备.只需执行以下操作:

  1. 转到DevTools设置.
  2. 激活"设备"选项卡.
  3. 单击面板底部的"添加自定义设备"按钮.
  4. 填写列表顶部显示的表单.
  5. 按"添加设备"
  6. 启用设备模式并在设备菜单中找到您的自定义设备.

但请记住,"模拟器"确实有局限性 - 您无法测试有关的所有内容:

  • 设备硬件
  • 浏览器UI
  • 浏览器功能
  • 应用缓存