如何在 Chrome 模拟器中测试摩托罗拉 G 中的站点？

Question

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

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

提前致谢。

Answer 1

我认为 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 可以正确模拟手机屏幕上应该显示的内容n

Answer 2

“模拟器”所做的唯一事情就是模拟屏幕分辨率和像素尺寸。

自定义屏幕设置：

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

自定义设备

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

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

但请记住，“模拟器”确实有限制 - 您无法测试以下方面的所有内容：

• 设备硬件
• 浏览器用户界面
• 浏览器功能
• 应用缓存

Answer 3

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

模拟器的一些主要问题：

-当网站没有缩放以适应手机并且仍然具有所有相同的内容时，就会发生“钥匙孔问题”。这会让移动用户感觉他们正在通过钥匙孔查看您的网站。

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

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

- 网站越来越流行拥有视频。但是，很多手机没有安装播放器（即flash），或者使用默认浏览器播放时很难。

-随着响应式设计的兴起，许多公司已经放弃了单独的移动网站。但是，有一些仅限移动设备的网站，并且模拟器经常提供错误的版本。

希望对您有所帮助。