And I’m really excited about it and I share it with my friends but it doesn’t work with iPhones. So I tried to fix that tonight. Turns out it’s basically impossible. I can’t disable pinch-to-zoom so my mobile controls basically are fucked and I can’t go full screen either.
I’m hoping I can at least make it a PWA and then hopefully fix some of those issues. We’ll see.
But honestly I feel like Apple will have some weird limitation so that you have to download it through their app store or something.
Apple consistently makes decisions that benefits their business but not their users, and that’s why they’re a shit company.
Well, this is of course a matter of perspective. Some web devs argue it improves the accessibility on websites. However, for real web apps or games it’s not necessarily a good thing. You maybe find some hacks in this stackoverflow thread:
I understand that you are upset, especially since you surely put a lot of effort in your app. However, I would appreciate a less strong wording even in this situation. Also consider to:
just not support Safari/Apple devices and explain this situtation to your users. If more and more good content can’t be used with Apple products/software, they might reconsider their strategy
I would get used to it, apple continually change the goalposts where web development is concerned to keep it all sandboxed, safe, and less functional than their native apps.
The most recent surprise I got was them disabling accelerometer input by default.
Just be thankful webGL works on ios, it didn’t for a long while.
The touchscreen issue is part of a larger problem - various devices have different settings - even my HP laptop with a touchscreen screws up 3d navigation if gestures are switched on.
The best you can do is detect the device, detect possible input problems and tell the user how to fix it if necessary - with iphones there are several user controlled settings that could impair the experience - it’s really on the user if they want to keep buying hardware with built in disabilities, and up to them to change the settings if they want the full experience.
Does anyone know if I can make an iPhone app and use three.js? I want my game to be playable on iPhone’s! And I’m entirely unfamiliar with out iPhone apps work.
Sounds like you’re blaming the car manufacturer for not knowing how to fix a flat tire. Pinch-to-zoom can be disabled with the touch-action CSS property. For instance, if you want to override default pinch behavior on a <canvas> element, you can apply the CSS rule touch-action: none; and then handle the behavior yourself via JavaScript.
There’s also a pretty solid JavaScript library that helps simplify gestures like pinch-zoom, rotate, multi-touch, etc: https://hammerjs.github.io/ They also use the touch-action property to disable undesired browser zooming.
You can try this example on an iPhone right now: 4D Noise Visualizer pinch on the canvas, and the camera will zoom in and out without scaling the whole page. However, pinch on the GUI, and the whole page will scale, because that element does not have any touch-action rules applied to it.
I tend to agree with this opinion, it’s generally harder to make proper web apps for Safari.
In my case I had to disable pinch zoom not only on one div, but with two fingers on two separate divs, as I’m making a game that involves grabbing something on the canvas and tapping on a button at the same time.
For this, neither touch-action: none, neither hammer.js could entirely solve the problem, though it make it less systematic. I will have to accept it as it is, but it’s very frustrating to know that half my smartphone users will have a less good experience.
And after that, there is still the problem of the lower toolbar impossible to hide, and overlapping when landscape mode…
I really hope Apple burst soon, they are keeping the web from evolving to the webapps network it should already be. It’s obvious that they would prefer the web to stick to the cooking-blogs era.
I can only sign that, if you buy apple you only buy a brand, not quality or anything even remotely justifying the price. For developers it’s even worse than for the consumers, it’s a pain to debug anything and compatibility is a foreign word for apple, bugs their favourite, and giving less for more money their future. But it’s funny to see how they still successfully squeeze out every cent out of their fanboys.
apple_stand.jpg
Regarding the viewport issue, it can be fixed but it’s a little hacky to get it for for all cases. I never came across so many browser bugs and issues than with safari, you can avoid most issues by packing your app into a container, but you have to pay $99 a year just for a store account, i mean you get a iPen for that price too I paid 30€ for a playstore account, once.
Does anybody has a solution, on ipad, to disable pinch/zoom while being in fullscreen (webkitRequestFullscreen)?
I got no success whatever solution I tried (touch-action, event.preventDefault(), user-scalable=no…)
I wasn’t aware that iPads granted the webkitRequestFullscreen request. Last I checked, they disallowed it for user-safety reasons.
So you’re adding touch-action: none to the same element that you’re requesting fullscreen access for?
It’s been working for a while as far as I remember… but needs a user interaction as on Chrome.
Yes, whatever element I’m adding touch-action: none to, it won’t work.
Here’s a codepen with almost everything I’ve tried:
I paid 30€ for a playstore account, once.