Webpage Rendering Based on Device Type/OS

[skanda-vasishta]

There are three possible ways to access the website that we will focus on:

• [x] 1. Desktop/PC: This is supported by the current implementation, don't need to change much here.
• [x] 2. Tablet: A touch screen device not as small as a phone; omit mouseover/mouseout functionality and instead have all SVG icons flicker.
• [x] 3. Mobile: Omit SVG altogether and replace with individual icons.

Ideally, look at device OS (can infer touchscreen if OS is iOS or Android), then go from there.

[skanda-vasishta]

From Jai:

If we are running on an ipad, a tablet-based Android device, or a Chromebook, we want the animated icons to fire. How would you know? Check this list of user agents as an example: https://deviceatlas.com/blog/list-of-user-agent-strings

Chromebooks show up as CrOS. You can check on the user agents whether the client is running android or ios - which doesn't really distinguish between tablets or mobile devices. For that, we can use the clientWidth property, where smaller widths will switch over to mobile mode. Here we would need to get the clientwidth of the root element. https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth

We can use the ontouchstart event in javascript to detect for touch sensitive chromebooks or touch sensitive windows tablets. https://www.geeksforgeeks.org/how-to-detect-touch-screen-device-using-javascript/