When a user focuses on a text input, mobile browsers zoom in for convenience. This is good.
But on a single page app, you don't refresh the page upon the form being submitted, so the viewport doesn't return to its non-zoomed state. This makes it difficult for the user to get their bearings again, or navigate as they did before. It is possible for them to double tap, to return the viewport to normal, but many of our users wouldn't know to do that.
I believe I am asking the same thing as the following questions, none of which provide a reliable answer. I would strongly prefer not to have to include another JS library.
Mobile-friendly web design: How to programmatically zoom out after text input?
Mobile Viewport zoom back
Related
I am working on an app that will have web content, living in a web view, and some other content and views built using react-native. I have a meta tag viewport with config user scalable is yes.
But my problem is I want when I zoom my web view, some span have content HTML not zoom out with another content and that text keeps current size. I found an example in the mail app detail view in Gmail.
Thanks!
In zone 1, this text does not change the font when zoom,
In zone 2, content zoom out
I know exactly what you are asking for.
If you use GMail on a mobile device, zooming in will cause the email to zoom in, but not the header of the email. However, if you zoom in on the header itself, it will zoom in at that point.
What you are looking for is how to handle multi-touch interactions.
GMail does this by preventing the default behavior of the zoom in when zooming on a target element. In this case, the email body.
When zooming in on the header, it is no longer preventing the default behavior.
It's not a trivial thing to implement. You'll need to take some time to read up on multi-touch interactions. You can find great info over at MDN.
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Multi-touch_interaction
We have a webpage with fixed header and footer and scrollable content.
It has 20 text boxes. The ones at the bottom e.g. Zip, Telephone are obscured by the iOS virtual keyboard that pops up on text box focus.
If I detect that the user has a device with a virtual keyboard I could add half a screen padding to the bottom text box so that the user can scroll down and the virtual keyboard doesn’t obscure it.
Is this the normal way to handle it and if so is there a JavaScript/css way to detect if the device is going to pop up a virtual keyboard? Or since it’s an aspx page should we try and detect it serverside?
Actually iOS seems now not to have that issue — rather it pushed the bottom up rather than popping over. I’m not sure why it occurred before.
Adding padding would certainly be effective though it may slightly deteriorate the quality of your webpage. However, if it is a recurring issue that needs immediate action, I would suggest padding.
This question on StackOverflow should be very helpful to you:
Move a view up only when the keyboard covers an input field
Ya Usually you should add padding, then it would go up and be more user friendly. I think that's a good idea. I think it's normal.
I have a simple web app with a few text inputs and the inputs toward the bottom of the page get covered up by the iPhone keyboard. This is a terrible user experience making it difficult for the user to see what text they are entering as well as selecting other elements on the page after they are done entering text.
Apple documents the behavior here: https://developer.apple.com/library/archive/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html
I've seen several posts about this problem and there are multiple solutions for iOS app development but no real solutions for web apps.
I don't have the resources to test on multiple devices and I don't have an android device so I don't know if this problem even occurs there.
Is there a cross platform solution for detecting when a keyboard is covering the UI, how much of the UI is being covered, and an approach to ensure the input is visible?
This answer is a hack; but it's the best solution I have come up with.
Adding a padding to the bottom of the page that is large enough for the keyboard enables content to be displayed as desired when the keyboard is visible.
Using some javascript listeners and a CSS class, this padding can be added only when the keyboard is displayed.
body.keyboard {
height: calc(100% + 500px); /* add padding for keyboard */
}
The following javascript will add and remove the CSS class when an input has focus, which is the closest I can get to figuring out when the keyboard is displayed.
// focus events don't bubble, must use capture phase
document.body.addEventListener("focus", event => {
const target = event.target;
switch (target.tagName) {
case "INPUT":
case "TEXTAREA":
case "SELECT":
document.body.classList.add("keyboard");
}
}, true);
document.body.addEventListener("blur", () => {
document.body.classList.remove("keyboard");
}, true);
It's also worth noting that iOS performs an annoying zoom if the input font size is less that 16px so this is also important.
input {
font-size: 16px !important;
}
Please let me know if you have a better solution.
What about this: stackoverflow: Scroll textfield up when keyboard popsup?
Even if you're not using jquery you could still bind the focus event and scroll the page using the window.scrollTo(0, document.body.scrollHeight); function and just scroll to the bottom. Because interestingly, the space is created, but not scrolled to.
If you want to go fancy, you can check for the window size in order to determine if and how much you want to scroll.
What you can do is hide the keyboard on any click event. So, figure out when you don't want to display a keyboard and when do you really want to show it.
So once figured, you can hide the keyboard like:
InputMethodManager manager = getSystemService(INPUT_METHOD_SERVICE);
manager.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(),InputMethodManager.HIDE_NOT_ALWAYS);
Here's an answer that might help you: Scroll textfield up when keyboard popsup
In summary, you can make use of the visual viewport api and update the next render accordingly.
What I did is to scroll the elements into view when focused by touch.
There is no exact api or anything to know if the keyboard is open at all, or how much the keyboard covers (in chrome actually the keyboard reduces the viewport, not overlays on top), but looking at average mobiles, it covers roughly half of it.
As for the implementation, I use a kind of simple heuristic. You can go all-in if the device is a touch device see mobile device detection section here, but this doesn't necessarily cover laptops with touch screens. (and doing it based on resolution is a bad idea also)
I took this "touch device" approach one step forward, and listen on the touchstart event on form elements and set a variable something like hasTouchKeyboard, and then scroll element to top of page (or at least first half that is likely not covered) when focused if this variable is true.
The idea behind it is that the touchstart usually fires before the focused event, plus the real differentiator is that if the user touched the input field, then it is 100% that it is using a touch device AND actually used touch on it (that will likely trigger the keyboard), and not just focused it with mouse on a hybrid device.
It is definitely not bulletproof, but fairly simple and works well without any user agent magic or other crazy stuff.
For www.lokilist.com I needed a solution that worked without javascript for the text input used to enter a Session ID.
On the server, I used the "isMobileDevice()" PHP function found here:
https://stackoverflow.com/a/23874239/20094562
Then attached a css class with onfocus css only if the requesting browser was "mobile" (that function considers tablets as mobile, which is all the better for this purpose since we actually care about touch screens).
To summarize:
Detect touch screens based on user agent with isMobileDevice()
In your css, include a placeholder class like ".mobileTextInput".
Also include in your css the onfocus property of that class like ".mobileTextInput:focus". This is what will reposition your text input when selected.
If the user agent is a mobile device, add the mobileTextInput class to the text elements you want to move above the virtual keyboard.
My webpage is a form with many text boxes. I have created my own popup keyboard which is much smaller than the iPad one thereby saving a lot of screen real estate, especially in Landscape mode.
My problem is that when I select a text box for entry the iPad keyboard appears.
Is there anyway through JavaScript to hide and disable the iPad keyboard.
Thanks,
Not to put your idea down in any way, honest. It's bad practice generally to try and 'supplant' the user's device for several reasons.
They might have a special keyboard tailored the way they want.
Their device might be in chinese, japanese, etc.
It's better to let the device itself handle this. In most devices there is absolutely no way to disable the default keyboard.
Problems I can see, besides the above ones are, what happens in devices that are 'mobile' but have a physical keyboard? Like the windows tablets. Do you account for different languages? All of them? Do you provide a way to switch between them? Can you set a default language so user's don't ALWAYS have to switch?
I'd suggest not using your own popup keyboard. Let the device handle it.
Also, check out UX Stackexchange and ask for some input there. They'll have better suggestions.
I'm developing course lectures for mobile devices, and have zoom capabilities disabled. I would like to keep it this way for everything on the page except images.
I've come close to what I'm aiming to do before by having the meta user-scalable="no" replaced with "yes" via jquery when the user clicks on a link that opens a pop up window within the page, allowing the user to then zoom in when the pop up window was open, and many of these pop up windows contained the images I wanted to enable the zoom for.
However, not all of the images I want the user to be able to zoom in on are inside of the pop up window, and I don't dictate what content goes where. I only control the gui (css, script files, etc.)
Is there a way to apply scalable="yes" to images only, while keeping the rest of the gui scalable="no"?
Scaling part of the page (the image) and not the rest of it doesn't really make sense. I think you'll probably be happy with the default behavior of images in the browser. Set user-scalable="no" for the website as normal, for images have links that open them in a new window (target="_blank") this will open a new browser tab and allow the user to zoom until they decide to go back to the page.
This method is usually far superior for mobile compared to something like lightbox due to performance benefits of the browser only needing to display the image.
I'll also add that many users get annoyed when user scaling is disabled (myself included). You may want to consider setting a minimum scale and allowing the user to zoom if they want instead.