I'm making a game that has 2 controls, left and right. On desktop those are the left and right cursor keys. On a machine without a keyboard or a machine primarily interacted with via touch screen I need to show buttons the user can press with their fingers.
Is there a way to detect when it's appropriate to display these touch buttons and when it's not?
solutions considered:
check for iPhone/iPad/Android
That covers most phones and tablet but of course it will be wrong on some other brands
use css media queries hover and pointer
AFAIK these won't help. A phone probably has hover: none and pointer: course but what about an iPad with a stylus. It should allow both hover:hover and pointer:fine making it indistinguishable from a desktop.
check by size
Seems flaky. Tablets have pretty large sizes. Often as large as laptops.
check for touch support
isTouchDevice = "ontouchstart" in window;
returns true on many Windows devices with touch screens
Related
I currently have #media (any-hover: hover) condition in my css, and previously with (hover: hover), but neither do what I want: I would like to only enable hover event if a mobile device have some kind of hover mechanism (eg. trackpad, mouse but not limited) implanted.
However, with hover:hover at least on iPad it doesn't stimulate the hover event at all (I know hover detects if the device's primary interaction supports hover), not even I have magic keyboard connected (which has a trackpad). Then I change to any-hover and this time the iPad stimulates hover even without any accessory connected, and is interact with touch.
Hence, is there's a way to detect if a device has hover-able device connected? Should I use pointer: fine or pointer: coarse to do this? Or is there a way to do so in JS? I don't want it simply detect if there's a mouse connected, but any kind of device with hover-like mechanism.
So you want something that does not match for normal iPads and does match if someone plugs a mouse into an iPad?
pointer: fine is usually enough, but you can get even more precise with (any-hover: hover) and (pointer: fine). You really only want to enable hover content for devices that have fine-grained pointer control.
You can express this in JS as well:
let mql = window.matchMedia('(any-hover: hover) and (pointer: fine');
Then I change to any-hover and this time the iPad stimulates hover even without any accessory connected, and is interact with touch.
That seems like a bug.
I've looked around a bit but couldn't find a conclusive answer. Is it possible to detect multi touch gestures and events from a Macbook touchpad or other laptop trackpads in regular desktop browsers.
Let's say I want to click the touchpad and then scroll (a kind of dragscroll), but only when there is an extra finger touching the touchpad, instead of a regular dragscroll where the button is hold and then a single finger slides around.
It would be best if there was a generic API for this which worked with any laptop trackpad.
Is it possible to detect multi touch gestures and events from a Macbook touchpad or other laptop trackpads in regular desktop browsers.
Unfortunately, no.
In theory, the Touch API is probably how this would be supported. However, desktop browsers only implement this API for devices with true touch screens (like a tablet or smartphone), not for trackpads.
Additionally, many laptops simply do not have trackpads which can track multiple touch points. This functionality is relatively uncommon outside of Apple laptops.
Recently i am working on a mobile webapp with a big textarea that needs to constantly display two little buttons on the bottom corners of the viewport. So i started with the basics:
position: fixed;
bottom: 10px;
This works smoothly and looks beautiful on my target devices (iOS >=5, Android >= 2.3). However, the problem starts when i give my big textarea a focus() and a system keyboard appears.
In iOS browsers, the keyboard is just an overlay on the viewport - so the viewport keeps it's dimensions after keyboard is on and half of it is just hidden under it.
In most android devices the keyboard appearance makes the viewport's height smaller and fitted to the remaining area so my position fixed workes here. However, some android devices work just like iOS and the keyboard appears as an overlay.
I'm trying to think of the best way to cover this, not using user agent string. I want this to be a universal solution. I figured out sth like
//check the viewport height
on(focus) -> see if viewport size changed and change position: fixed
But to do this i still need to wait couple seconds after focus to let the window get resized or not + i don't really know where to put my buttons if the viewport stays the same, as i might be on any of the iOS systems (the have different sizes fo keyboard) or on android device with bad behaviour.
What do You think?
I have a need to create a part of a mobile web page that can scroll on its own (even though I tend to disagree with that being a good thing on mobile). The standard method is to set it to overflow: scroll and there you go.
Alas, on iOS one needs to use two fingers to scroll that area which many still feel is unintuitive. This will be fixed in iOS5, but until then, I need to support it with one touch.
So I found a few JS options. One is Scrollability. The catch is that it only supports iOS. In addition to iOS I need to support android, BlackBerry OS6 and Nokia. So that one is out.
I then tried iScroll. This works pretty well. The catch, for me, is that it does this through pure JS in that you never see a native scrollbar. As such, the scrollbar it generates is more of a dummy in that there's no way to make it work with a mouse or keyboard.
So, the question: Is anyone aware of a JS solution for creating a scrolling div on a mobile web page that a) allows for one-touch scrolling on touch devices and b) uses a native scroll bar to enable keyboard devices?
If there isn't one, we can revert to device detection, giving touch devices the JS and keyboard devices the scrollbar...though that still leaves us the issue of some touch devices also having keyboards.
I'm building an app in the browser for the iPad and was wondering if it's possible to lock the orientation of the viewport? I've checked apple's documentation and the only thing I've found says orientation is read only: https://developer.apple.com/documentation/webkitjs/domwindow/1632568-orientation
I'm thinking this means that there is no way to lock the orientation in the browser. Anyone got any ideas?
No. I guess this would appear too restrictive to the user, so you can only detect UI orientation. The only way to lock the orientation would be the exterior switch on the side of the device.
See this answer for code to detect it. You could also just use window.orientation to get it.
For my webapps, I simply have a popover-view that alerts the user to rotate their device when its orientation is not desirable. You might even consider two UI setups for different orientations for a more customizable experience.