Issue Description:
I manage a small group of about 90 users who are crucial to our business. When one or two users from this group request changes to the user interface (UI) of their web app, we allocate development resources to meet their needs. However, understanding how the entire group uses the application is essential because each user has unique preferences on how the UI should appear and interacts with the app differently. My current challenge lies in accurately identifying whether users are utilizing hardware keyboards or soft keyboards. I am seeking a solution beyond a simple command like "use the new Window.TabletMode == true!" as it may not be applicable in this scenario.
Research Findings:
- A similar question on Stack Overflow (Detect virtual keyboard vs. hardware keyboard) focuses on using a JavaScript keyboard to replace the soft keyboard rather than detecting the type of keyboard being used. The solutions provided are tailored for various input types such as numbers and dates, whereas my requirement is specific to supporting IE11+. The devices used by my group have a consistent hardware keyboard brand (Dell) and operating system (Windows/IE11), which may warrant exploring alternative approaches.
- One approach involves checking the Registry for UI settings, but I prefer sticking to JavaScript-based solutions for consistency.
- While Android offers events for detecting the display status of the soft keyboard, none of my users utilize Android devices.
- Internet Explorer should receive a WM_SETTINGCHANGE message upon UI changes, but it's unclear if this message can be accessed through a JavaScript API.
Potential Solution – Code Implementation:
Referencing information from W3Schools:
The window.orientation property indicates portrait or landscape view.
By combining this property with window.innerHeight, a script can be implemented to identify keyboard presence based on the aspect ratio of the viewport.
var portrait;
$(window).on("orientationchange",function(event){
if (event.orientation == 0)
{
portrait = true;
}
else
{
portrait = false;
}
});
This method can detect changes in the browser layout when running fullscreen. However, there might be limitations when not in fullscreen mode. Exploring other non-invasive detection techniques for different browsers and screen sizes is recommended.
Key considerations include setting initial variables upon document load, determining typing relevance triggers, assessing browser capabilities, and tracking usage patterns for informed decision-making.
Environment Details:
- Devices used are Dell tablet/laptop hybrids with IE11+ support. Solutions compatible with IE11+ are preferred due to device constraints.
- Integrating additional JavaScript libraries is feasible. Existing libraries like JQuery 2.2 and Knockout 2.1 are present, optimizing compatibility.
- Restrictions apply to implementing heavy-handed solutions like ActiveX due to scalability concerns within a large user base environment.
- Screens have standardized 11-inch displays, discouraging resolution-dependent answers for broader applicability.
Repercussions and Industry Trends:
In sectors like medical kiosks and Electronic Medical Records (EMR) systems, a shift away from iPads towards Windows tablets is observed to accommodate diverse UI requirements. Physicians often influence IT decisions for personalized UI changes, leveraging Microsoft's flexible approach to browser interventions. This trend reflects the growing preference for Windows tablets among healthcare providers, driven by .NET development capabilities and evolving industry standards.