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.
Update: 🙁 Virtual keyboard support is deprecated in Chrome 68+; this answer no longer works.
Original answer
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
Related
I'm developing a responsive web app with a complicated UI. In order to demonstrate changes that I made, I'm checking out on responsive design modes both in Safari and Chrome. Is there any way that I can simulate keyboard appearing when I clicked on an input element as it occurs in a mobile Safari/Chrome.
For example, I pick iPhone X in responsive design mode in Chrome and Safari. Since the keyboard doesn't pops up when I click on an input, the scrolling behaviour is different than the experience on an iPhone device. In order to see the results of my change I need to deploy it to a server each time.
Is there a way to pop up the keyboard in responsive design mode?
After trying a bunch of solutions, I finally ended up with using Xcode iPhone simulators. I do the debugging with binding simulator and Safari developer console on my Macbook. If you select IO/Keyboard/Toggle Software Keyboard, then you would be able to see how your design might look on an iPhone when keyboard is visible.
I'm having a problem with my webpage where it doesn't scroll on phones.
This is not my problem though. My problem is that it only happens on phones, and I need to debug is, but have no desire to debug from a cell phone (whether or not that's an option).
In firefox, I've tried using "Simulate touch events," but apparently (and I think this is a design flaw) that does not mean that clicking and dragging equates to the swipe gesture.
So how do I test my webpage with phone gestures on desktop?
Try these:
1.You could use a simulator specific to your phone's os.. for example Bluestacks for android.
2.Go to firefox and press Shift+F8
3.Press Ctrl+Shift+M on Chrome
I've got a little problem with my website and ipad/iphones. A certain tag in my css causes problems and I'm unable to check if I've solved the problem. Is there a way to look at my website as if on an ipad while not actually buying an ipad. Is there something like an ipad emulator or something?
You can use web (free) services that provide such functionality. There is a lot of them. For example: http://ipadpeek.com/ or http://mobiletest.me/.
There is also a simple solution that doesn't require any further app installation.
If you're running google Chrome you can enter the developer tools by hitting F12 on a PC and Command+option+I on a Mac.
In the developer tools you have on the top left corner of the screen a mobile device emulator, which you can choose various different models of mobile devices from. not just iPad and iPhone.
Note that you have to refresh the page each time you change a device emulator. Otherwise it won't load with all the characteristics of the current emulation.
I am using the following test setup (Latest meaning as of July 14th 2012):
Core i7 with an ATI FirePro V9800 (Eyefinity)
Windows 7 Pro 64 Bit (latest updates / patches)
Latest Catalyst drivers
Latest Google Chrome Stable / Canary.
6 x 1080p displays (in a row) resulting in a 11520px by 1080px desktop.
I have tried the following to get a fullscreen web view across displays:
Set the maximize to whole desktop setting in the Catalyst control panel. That works for maximizing normal windows (except Chrome), but not for anything fullscreen.
Tried Chrome Kiosk mode (that would be ideal), same problem, only fills up primary display.
Using Chrome Fullscreen or HTML5 fullscreen API results in the same: Fullscreen on a single of the 6 monitors.
IE9 seems to have a limitation of about 10000px for the webview, thus i cannot even stretch it across the entire desktop manually (that works with Chrome).
Tried UltraMon.
Tried a number of Chrome command line switches (http://peter.sh/experiments/chromium-command-line-switches/) for kiosk mode, start in fullscreen etc., so right now using the --app="http://127.0.0.1/index.html" switch to at least get rid of most of Chrome's UI elements.
Tried to find an extension for Chrome, but no success.
Tried Chrome Frame in IE9, also only uses one display.
I understand it is most probably a driver issue reporting the wrong desktop size to Chrome (which I thought was the point of the Catalyst Maximize to full desktop size function). Chrome does not seem to get the desktop size from the same place as other "normal" windows do (obviously not very familiar with Windows windowing).
I would like to work on a full-screen Chrome webview across multiple monitors or a completely chromeless window that I can manually maximize. My browser configuration is flexible, even the OS is somewhat flexible.
I would like to know:
Has anyone gotten a fullscreen browser view across more than 1 monitor to work with Chrome (or any browser)?
Are there any tools that can fake the right (full) display size to Chrome?
Could this be workable in Windows 8?
Is there something that just displays a Chromeless Chrome browser that runs the very latest Chrome? (I have seen awesomium, but find that its price is too high for what I want it to do). Also I want to be able to use the most recent Chrome releases ideally.
Any comments welcome and sorry for the lengthy details.
Thanks for reading!
-Tobi
This worked for me using two monitors:
start C:\Users\terminal\AppData\Local\Google\Chrome\Application\chrome.exe --app="http://www.domain1.com" --window-position=0,0 --kiosk --user-data-dir=c:/monitor1
start C:\Users\terminal\AppData\Local\Google\Chrome\Application\chrome.exe --app="http://www.domain2.com" --window-position=1680,0 --kiosk --user-data-dir=c:/monitor2
I think the order of the parameters is relevant.
I have started coding for mobile browsers (i.e. iPad, Galaxy Tab, etc). For a starter, I don't have budgets to get all the tablets for testing (I wish I do :D). Anyway, I am looking for a decent mobile browser simulators. I have looked into Ripple (only works in Chrome), MobiOne, and PhoneGap simulator. But all of these are not that up to par. Can someone recommended a decent one? and it will be great if it is also open source.
Thanks in advance
A good list of emulators and simulators are here: http://www.mobilexweb.com/emulators
For iPad, the only simulator I know of is built into XCode when you compile or run. You have an option of previewing in iPhone or iPad, and though the screen is hard to read, it's manageable if you click on 2x button.
If you're developing for android, the Android SDK has one.
http://developer.android.com/sdk/index.html
if you just want to quickly view how a webpage would render at various mobile device resolutions then here is a nice little webpage...
http://synthphone.com
you can even link directly to a url via query strings. for example, here is one that should load the Sencha Touch 2 carousel. Use your mouse like a finger to slide around the images etc.
http://www.synthphone.com/?u=http://dev.sencha.com/deploy/touch/examples/production/carousel/index.html
have fun!