Html 如何在chrome emulator中测试motorola g中的站点?

Html 如何在chrome emulator中测试motorola g中的站点?,html,css,testing,cross-browser,Html,Css,Testing,Cross Browser,我正在chrome的所有移动模拟器中测试我的站点 这里moto g模拟器不可用。我的测试团队正在moto g中讨论这个问题。有人能帮我测试一下摩托罗拉吗 提前感谢。“emulator”唯一做的事情就是模拟屏幕分辨率和像素尺寸 自定义屏幕设置: 单击这些值并进行调整。Moto G的分辨率为720 x 1280像素,并将像素尺寸设置为2或3 自定义设备 如果发现边缘盒或壁龛设备,可以添加自定义设备。只需执行以下操作: 转到DevTools设置 激活“设备”选项卡 单击面板底部的“添加自定义设备”

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

这里moto g模拟器不可用。我的测试团队正在moto g中讨论这个问题。有人能帮我测试一下摩托罗拉吗

提前感谢。

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

自定义屏幕设置:

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

自定义设备

如果发现边缘盒或壁龛设备,可以添加自定义设备。只需执行以下操作:

  • 转到DevTools设置
  • 激活“设备”选项卡
  • 单击面板底部的“添加自定义设备”按钮
  • 填写列表顶部的表格
  • 按“添加设备”
  • 启用设备模式并在中查找自定义设备 设备菜单
  • 但请记住,“emulator”确实有局限性-您无法测试以下方面的所有内容:

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

    您可能想看看类似Mobilizer的东西,以便在真实设备上测试页面,而不是在模拟器上,因为模拟器通常显示不准确的结果

    模拟器的一些主要问题:

    -当网站没有缩放到适合手机的位置,并且仍然有相同的内容时,就会出现“钥匙孔问题”。这让移动用户觉得他们是通过一个钥匙孔看你的网站

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

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

    -网站上的视频越来越流行。然而,很多手机没有安装播放器(如flash),或者很难使用默认浏览器播放

    -随着响应性设计的兴起,许多公司已经放弃了单独的移动网站。然而,也有一些仅限移动设备的网站,模拟器经常给出错误的版本


    希望这会有帮助。

    我认为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构建/MMB29U)AppleWebKit/537.36(KHTML,如Gecko)Chrome/51.0.2704.81 Mobile Safari/537.36

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

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