如何在chrome开发工具中显示移动键盘？ [英] How to bring up mobile keyboard in chrome dev tools?

问题描述

我试图测试iOS和Android上某些输入的默认键盘类型。有没有办法在Chrome devtools手机模拟器中调出屏幕键盘？

到目前为止，我已经通过运行xcode模拟器并指向我的网站测试了我的网站的iOS版本，但使用devtools会非常方便。

谢谢！

解决方案

您可以查看Nexus 5X设备的标准键盘纵向或横向视图：

然而，你不能与它进行交互，也不会根据它从中调用的上下文进行更改。我通过检查DevTools发现它只是一个覆盖在SVG上的图像文件。这些配置文件没有什么明智之举。看看应用程序如何响应缩小的空间是非常有用的。

要使用上下文测试键盘的正确行为，我只会推荐使用XCode和Android模拟器，或者更好地使用真实设备。

请参阅 测试响应式设备和设备专用视口

I'm trying to test which keyboard type comes up by default for certain inputs on iOS and Android. Is there a way to bring up the on screen keyboard in Chrome devtools phone simulator?

So far I have tested the iOS version of my website by running the xcode simulator and pointing to my website but it would be really convenient to use devtools.

Thanks!

解决方案

You can view the standard keyboard for the Nexus 5X device for the portrait or landscape view:

However, you can't interact with it, nor does it change based on the context it is called from. I found by inspecting DevTools that it is simply an image file overlayed onto an SVG. There's nothing smart going on with these profiles. It's just useful to look at how the app responds to the reduced space.

To test the proper behaviour of keyboards with context, I would just recommend using XCode and Android emulators, or better still use real devices.

See: Test Responsive and Device-specific Viewports

这篇关于如何在chrome开发工具中显示移动键盘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！