HTML5 - Mobile Browser Dragging&Click Functionality
Posted: Tue Apr 25, 2017 11:09 am
Hello,
I'm trying to make our application as a demo available through TSPLUS and have encountered an issue that only happens with mobile devices (iOS&Android).
Our application has it's own vector oriented zoom function to scale its content, and many objects that can be used through dragging, for example a Slider or those Knobs you see in Hi-Fi to rotate in order to increase volume.
What I noticed was that the mobile browsers use the dragging functionality to move the page around and it also zooms the whole session itself, meaning that I can't perform any dragging or scrolling operations fluently on these browsers. To overcome it I'm forced to use the mouse control that TSPLUS gives when it detects that the client is a mobile device which doesn't work perfectly in this case since our users will definitely operate the application as if it was a normal touchscreen, swiping and clicking whatever they need without using your mouse control.
It seems to be an issue with how mobile works in general, because when I take a Windows Tablet, a 9 inch Trekstor Surftab for example, then it works perfectly fine with Internet Explorer or any other browser that I could install there.
On the other hand, using a Windows Tablet means that I won't have that mouse control that is provided in case the client is mobile, in this usercase scenario I won't be able to scroll, there is probably a way to enable the mouse and I probably didn't find it yet, but this would be an issue too since now we entered the area of having multiple platforms, same type of usability (touch), yet not the same touch controls are being provided for use, wouldn't be an issue if scroll worked natively.
My first idea was to disable zooming in general by adding meta tags to the html5.html, which didn't work, still zoomed.
Alternative I tried to set in the Chrome Settings in my mobile device, to always force 100% scale, still zoomed.
This part was only me trying to disable the zooming, but I think that even if I managed to block the zooming, I would still have the issue with how the input works in the mobile browser itself, that it's not registering the dragging event in the application, but instead in the browser itself.
Does somebody have an idea how to solve this, or if any TSPLUS staff has an idea how to handle this?
Thank you in advance.
I'm trying to make our application as a demo available through TSPLUS and have encountered an issue that only happens with mobile devices (iOS&Android).
Our application has it's own vector oriented zoom function to scale its content, and many objects that can be used through dragging, for example a Slider or those Knobs you see in Hi-Fi to rotate in order to increase volume.
What I noticed was that the mobile browsers use the dragging functionality to move the page around and it also zooms the whole session itself, meaning that I can't perform any dragging or scrolling operations fluently on these browsers. To overcome it I'm forced to use the mouse control that TSPLUS gives when it detects that the client is a mobile device which doesn't work perfectly in this case since our users will definitely operate the application as if it was a normal touchscreen, swiping and clicking whatever they need without using your mouse control.
It seems to be an issue with how mobile works in general, because when I take a Windows Tablet, a 9 inch Trekstor Surftab for example, then it works perfectly fine with Internet Explorer or any other browser that I could install there.
On the other hand, using a Windows Tablet means that I won't have that mouse control that is provided in case the client is mobile, in this usercase scenario I won't be able to scroll, there is probably a way to enable the mouse and I probably didn't find it yet, but this would be an issue too since now we entered the area of having multiple platforms, same type of usability (touch), yet not the same touch controls are being provided for use, wouldn't be an issue if scroll worked natively.
My first idea was to disable zooming in general by adding meta tags to the html5.html, which didn't work, still zoomed.
Alternative I tried to set in the Chrome Settings in my mobile device, to always force 100% scale, still zoomed.
This part was only me trying to disable the zooming, but I think that even if I managed to block the zooming, I would still have the issue with how the input works in the mobile browser itself, that it's not registering the dragging event in the application, but instead in the browser itself.
Does somebody have an idea how to solve this, or if any TSPLUS staff has an idea how to handle this?
Thank you in advance.