如何在 chrome 模拟器中测试 motorola g 中的站点?

how to test site in motorola g in chrome emulator?

我正在 chrome 中的所有移动模拟器中测试我的网站。

此处无法使用 moto g 模拟器。我的测试团队在 moto g 中说出了问题。谁能帮忙测试摩托罗拉

提前致谢。

"emulator" 唯一做的就是模拟屏幕分辨率和像素尺寸。

自定义屏幕设置:

单击值并进行调整。 Moto G 的分辨率为 720 x 1280 像素,并将像素尺寸设置为 2 或 3。

自定义设备

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

  1. 转到 DevTools 设置。
  2. 激活“设备”选项卡。
  3. 单击面板底部的 "Add custom device" 按钮。
  4. 填写出现在列表顶部的表格。
  5. 按"Add Device"
  6. 启用设备模式并在中找到您的自定义设备 设备菜单。

但请记住,"emulator" 确实有局限性 - 您无法测试有关以下方面的所有内容:

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

您可能想看看 http://mobile1st.com 的 Mobilizer 之类的东西,这样您就可以在 真实设备 而不是模拟器上测试页面,因为模拟器通常显示不准确的结果。

模拟器的一些主要问题:

-A "Keyhole Problem" 发生在站点未缩放以适应 phone 并且仍然具有所有相同内容时。这会让移动用户感觉他们正在通过锁孔查看您的网站。

-许多响应式测试站点使用 iframe 来模拟设备。不幸的是,许多网站的设置禁止浏览器在 iframe 中呈现它们,从而导致黑屏。

-不同的浏览器和操作系统以不同方式呈现默认元素,例如按钮和滚动条。虽然差异可能很小,但它们可能会对您的用户体验产生巨大影响。

-网站上有视频越来越受欢迎。但是,很多 phone 没有安装播放器(即 flash)或者很难用默认浏览器播放。

-随着响应式设计的兴起,许多公司已经放弃了拥有单独的移动站点。但是,有一些仅限移动设备的网站,模拟器通常会给出错误的版本。

希望对您有所帮助。

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

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

例如,MotoG3 的视口大小为 360x640。设备像素比为 2,这意味着网络看到的每个 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 在这两种配置中的外观:

您可以清楚地看到,使用 360x640 像素和 2 的 DPR 可以正确模拟应该在 phone 屏幕上显示的内容