I am working on a webapp, I have some input fields. and personalized number pad for the same.
I have disabled keyboard from popping up when user is using chrome app on mobile device.
But if user switches to desktop site on chrome app, it doesn't work.
How should I fix this?
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 developed a WebApp for a customer, which should be used with an iPad Air. The issue occurs on a form with several text-input fields. The form is designed to fit on a page without scrollbars on mobile devices (smartphones or tablets) in portrait mode (vertical). On my devices (Android Smartphone, Android Tablet and iPad Pro) everything works fine, but on the iPad Air of the customer the following issue occurs:
Whenever he tries to select an input field in the bottom of the page, the iPad keyboard overlays this input field and the user is not able to scroll up to make the input field visible. So the user has to fill the input field, while he is not able to see what he is typing, because the input field is behind the keyboard (obviously not optimal).
I would expect, that the keyboard is shrinking the web view and scrolling the input field to a visible area, which is the case on my iPadPro.
What do I have to do to get the expected behavior on the iPad Air?
One user reported me that on his 11 inch macbook air all messed up. Now I do not have idea how can I fix that. Maybe there is some tools that I can use to emulate 11 inch macbook air?
Thanks
If you're using Firefox 15 or later, you can use the responsive design view by pressing Ctrl-Shift-M or going to the Firefox menu -> Web Developer -> Responsive Design View. That lets you easily resize the page (from a list of common resolutions, or arbitrarily by dragging the edges) without having to resize your browser window (as well as letting you resize it larger than your window). Other browsers might have a similar feature, but I'm not sure.
If you press Ctrl + Shift + M in your keyboard on, Mozilla Firefox and/or Google Chrome, then they will launch the Responsive Design View (Firefox) or Device Toolbar (Chrome) mode. Here you can manually adjust the window width and height to a match any device dimensions you wish, or you can also select from a set of preset device dimension options. It also gives the option to view the selected dimensions in either landscape/ portrait mode (for portable devices such as mobile or tablets) to see how a/your website would look in those different orientations.
I am not sure about any other browsers, but you can try to use the above keyboard shortcut, on another browser of your choice and see if it works there aswell.
Alternatively you can manually toggle the Responsive Design View (Firefox) or Device Toolbar (Chrome) modes, by navigating to:
Firefox 59
Menu (hamburger icon on top right) > Web Developer > Responsive Design Mode
Chrome 65
Menu (Three-dot icon on top right) > More Tools > Developer Tools
OR
Simply press Ctrl + Shift + I to launch the Developer Tools
Once the Developer Tools has launched click on the toggle device toolbar icon on the top-left corner of the Developer Tools menu, to view the webpage in responsive design view.
Again, I am only aware of doing this in Mozilla Firefox and Google Chrome, so other browsers may have a similar or different approach.
UPDATE
Edge Browser (Windows 10)
Use the keyboard shortcut Ctrl + SHIFT + I, OR navigate to Menu (three-dot icon on top right) > F12 Developer Tools to open the developer tools Menu, then go to the Emulation tab to see options for customising the window to different device size and dimensions.
First, you do not need to emulate a 11 inch screen but the screen resolution because no matter the inch of the screen, resolution can have multiple values.
I would suggest you to use a pluggin like "web developper" available for firefox and chrome (don't know for others), it will help you to resize your browser in different resolutions for testing.
chrome : https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
firefox : https://addons.mozilla.org/fr/firefox/addon/web-developer/
You can also use web app to test your site at different screen resolutions.
http://whatismyscreenresolution.net/multi-screen-test
Go to tool to test website at different resolution , enter your site's url, and hit "test" button
Get the resolution of MacBook Air and enter it in the toobar.
This tool is really good and apart from testing your site for MacBook Air, you can also test it for different device resolutions
My web application is to be supported by iPhone, Android and Blackberry torch. The code is working fine except some issues. One of the major issues that i am facing is:
When on a page, there are some tags. Some of which contains a text box for letting user's entry. Everything is working fine on iPhone and Android. But in Blackberry, when i am toggling between textboxes by using taps i.e. first open virtual keyboard by tapping on one textbox, then tap on other textbox, then tap again on the other one. In such cases, my background screen that should be displayed at the background of virtual keyboard, becomes completely blank(like it is not repainted as soon as virtual keyboard is opening and closing). If i slightly scroll, i get the background back.
Does anyone know about this problem? Is there any way i can retain my background or kind of refresh it?