Determining the positioning of a tablet with a JavaScript algorithm

We are currently working on developing an HTML5/JavaScript application specifically designed for tablet devices. Our main goal is to create different screen layouts for landscape and portrait orientations.

Initially, we attempted to detect orientation changes and track the current orientation by analyzing reported degrees (0, 90, -90, or 180) as suggested in this discussion. However, various devices interpret orientations differently which led us to face challenges. Could it be a bug or intentionally designed? An article from Samsung’s official site indicates that "landscape" is considered the default orientation, reporting "0" when held horizontally.

We then experimented with determining landscape mode based on screen size comparison (width vs height). This method proved unreliable when factoring in the on-screen keyboard display. The presence of a visible keyboard alters actual screen dimensions causing inaccuracies. For instance, even in portrait mode, if the unobstructed screen area widens more than its height due to keyboard visibility, it can mislead our algorithm.

An answer linked in this post seems outdated. Can anyone provide a more effective algorithm accounting for keyboard visibility?

javascriptandroid

Answer №1

http://jsfiddle.net/jjc39/

Check out this code snippet:

<span id="orientation">orientation</span>​

$(document).ready(checkOrientation);
$(window).resize(checkOrientation);

function checkOrientation() {
    var orientation = "Portrait";
    var screenWidth = $(window).width();
    var screenHeight = $(window).height();
    if (screenWidth > screenHeight) {
        orientation = "Landscape";
    }
    $("#orientation").html(orientation);
}​

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying search results seamlessly on the same page without any need for reloading

I am looking to create a search engine that displays results without the need to refresh the page. I have come across using hash as a potential solution, but I don't have much knowledge about web programming. So far, with the help of tutorials, I have ...

phpjavascriptjqueryajax

Adding plain HTML using jQuery can be done using the `.after()` and `.before()` methods

I have encountered a situation where I need to insert closing tags before an HTML element and then reopen it with the proper tags. The code snippet I am using is as follows: tag.before("</div></div>"); and then re-open it by adding proper tag ...

javascriptjqueryhtml

The reason why the script and div tags are so common in HTML is because they serve different purposes. However, it's

Hey there, friend! I've searched on baidu.com, cnds, and stack overflow, but couldn't find an answer. I have two questions: "why can script and div tags be used so much in HTML?" and "why is there only one html and body tag in HTML?" For example: ...

javascript

Creating Vue methods functions in separate JavaScript files

Hi there, I'm new to this so please forgive me if my question seems silly. I have a vue component called vuu /path_to_main/vue_file/app.js const vuu = new Vue({ el: '#vuu', data: { latitude: 'longi', long ...

javascriptvue.js

Angular and Node integration with Firestore authentication

I need some guidance with integrating an Angular application and a Node.js API, both using Firestore (Firebase). We have encountered an issue when validating tokens for authenticated users - the token never seems to expire. Even after logging out in the An ...

javascriptnode.jsangularfirebasefirebase-authentication

How can I use JavaScript to consistently fetch the CSS-defined percentage setting for padding/margin instead of the pixel size?

How can I retrieve the padding set in CSS for a div with {padding:10% 10px 20% 10px;} using JavaScript, considering that window.getComputedStyle(myelement).getPropertyValue('padding'); returns different results? In Firefox, it shows as "10% 10px ...

javascriptjquerycss

Issues with passing information from a child component to a parent component in a

Currently, I am developing a guessing game that involves questions and selection logic embedded in a component known as Questions. However, I am facing issues with App not being able to read the Questions code correctly. My objective is to have the state i ...

javascriptreactjsecmascript-6components

After changing the form action using jQuery, the GET variables mysteriously vanish

I am attempting to modify the action URL of a form using jQuery. Below is the code I have implemented: <form id='form_a' action='browse.php' method='get'> <input type="submit" value="Filter" id='but_a'& ...

javascriptjqueryhtml

Can you guide me on using protractor locators to find a child element?

Could you provide a suggestion for locating the <input> element in the DOM below? I have used by.repeater but can only reach the <td> element. Any additional protractor locator I try does not find the <input> element underneath. Thank y ...

javascriptangularjsseleniumselenium-webdriverprotractor

Unraveling the complexities of parsing multi-tiered JSON structures

I am struggling with indexing values from a multi-level JSON array. Here is the JSON data in question: { "items": [ { "snippet": { "title": "YouTube Developers Live: Embedded Web Player Customization" } ...

javascriptjson

Creating dynamic and asynchronous JSON structures with JavaScript

Struggling with async JavaScript here. I've got a function called within a jQuery AJAX function, and it looks like there are more async method calls in that function. Currently stuck in this situation. Here's the code snippet triggered by the jQ ...

javascriptjqueryjsonasynchronous

Why does the Next.js GET index request keep fetching multiple times instead of just once?

Currently, I am encountering an issue while working on a tutorial app with Next.js. One of my components is not rendering due to what seems like multiple executions of a simple GET request for an index page. The problem perplexes me, and I need some assist ...

javascriptreactjsmongodbnext.js

Ways to showcase corresponding information for an item contained within an array?

I'm working with a function that is designed to retrieve specific descriptions for objects nested within an array. The purpose of the function (findSettings()) is to take in an array (systemSettings) and a key (tab12) as arguments, then use a switch s ...

javascriptarraystypescriptobjectswitch-statement

Include the await keyword within the .then block

I'm trying to execute an await after receiving a response in the .then callback of my code: const info = new getInfo(this.fetchDetails); info .retrieve() .then((res) => { const details = this.getLatestInfo(res, 'John'); }) .ca ...

javascriptnode.jspromiseasync-await

Load a page and sprinkle some contents with a slide effect

I am brand new to jQuery and just starting out, so please excuse me if this question seems basic or silly. I would like the header and footer of my page to stay in place while the center content slides in from the right side when the page loads. This websi ...

javascriptjqueryhtmlcss

Tracking changes to payment methods when an order is modified through the WooCommerce backend

In the midst of working on a project involving WooCommerce, I am currently focused on integrating a new feature. This feature involves adding an order note whenever a user modifies the payment method during the order editing process within the WooCommerce ...

javascriptphpwordpresswoocommerceorders

pdfMake introduces a page breaking effect when the canvas is utilized with the type "line"

Can anyone shed some light on why a canvas declaration with the type "line" is causing a page break in the generated PDF? I've tried removing all canvases and the page break disappears, but I can't identify the root cause. Any insights would be ...

javascriptangularpage-breakpdfmake

Enhance the impact of "dialogs" to the fullest extent or minimize it to achieve the

How can I position the minimized dialog on the bottom of the div when appending dialogs next to each other in a FB messaging system? To achieve a Facebook messaging effect, the titlebar must go down when minimizing/maximizing the dialog. Perform the follo ...

javascriptjquerycss

Leveraging packages obtained from npm repositories

Recently, I came across this guide about React that included a paragraph that left me puzzled. According to the guide, CommonJS modules (found in npm) cannot be directly used in web browsers due to technical limitations. Instead, you need a JavaScript " ...

javascriptnode.jsnpm

"Please ensure that the field values in MessageEmbed are not left empty" stated discord.js

I've been working on a Discord bot using node.js, and I've encountered an issue with my kick and ban commands. I've tried to incorporate Discord embeds, but I keep running into this problem. Can anyone assist me with this? Here is the code ...

javascriptnode.jsnpmdiscord.js