iPad2 always displays UIWebView in 'portrait' orientation

I have a sophisticated HTML5 website that includes JavaScript. It is displayed in a UIWebView. The JavaScript on the page is supposed to determine whether the iPad is in Portrait or Landscape mode.

Unfortunately, I have encountered an issue. Regardless of whether the iPad is in Portrait or Landscape mode, the function call:

orientationObserver.getOrientation()

always returns "portrait".

Is this a common problem, or am I making a mistake somewhere? I have set the view containing the UIWebView to landscape mode using:

- (BOOL)shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation)interfaceOrientation {
    // Return YES for supported orientations
    return (interfaceOrientation==UIInterfaceOrientationLandscapeLeft);
}

When I use:

alert(orientationObserver.getOrientation()

in the JavaScript, it always returns "Portrait" even though the device (and the app) is in landscape mode.

Answer №1

If you want to customize CSS styles depending on the viewport orientation, you can target the browser using

body[orient="landscape"] or body[orient="portrait"]

Apple's solution to this problem is allowing developers to adjust the CSS when the orientation changes, instead of completely locking the re-orientation. A similar question can be found here.

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

Angular JS - Selecting Directives on the Fly

I'm currently developing an application where users can choose from various widgets using a graphical user interface (GUI). My plan is to integrate these widgets as angular directives. THE CONTROLLER $scope.widgets = ['one', 'two' ...

The HTML Canvas arc function fails to properly align curves

UPDATE Upon further investigation, I've discovered that this problem only occurs in Chrome. Could it be a browser issue rather than a coding problem? I'm working on creating a circle with clickable sections using HTML5 Canvas. The circle itself ...

Unseen cells and sift through information in datatables

I encountered an issue with the data table while trying to display data from a database using AJAX and applying filters through a PHP file. The initial setup works smoothly, however, I faced a problem after implementing a column hiding feature which caus ...

Setting up a recurring task with a while loop in a cron job

Discover numerous libraries dedicated to implementing cron jobs in NodeJS and Javascript, allowing for hosting on a server. Ultimately, cron jobs are simply repetitive tasks set to run at specific times/dates. This led me to ponder the distinction betwee ...

Troubleshooting issues with filtering two MongoDB arrays in ES6 and finding a solution

I have a scenario where I am requesting two arrays of objectIDs from MongoDB, and then attempting to identify the differences between the two arrays. In addition, I am passing these arrays through express middleware using res.locals. Below is the code sn ...

Insert text within the switch component using Material-UI

Looking to customize Material UI's Switch component with text inside? Check out the image below for an idea of what I'm going for. https://i.stack.imgur.com/KadRZ.png Take a look at my code snippet: import React from 'react'; import S ...

Choose a procedure to reset to the original setting

I'm attempting to achieve something that seems straightforward, but I'm having trouble finding a solution. I have a <select> tag with 5 <option> elements. All I want to do is, when I click a button (which has a function inside of it), ...

I am unable to access my JavaScript class in Laravel Mix

Within my Laravel project, I have developed a custom form validation class. However, after running npm run dev, I am unable to access this class. Files: small-form-validation.js class SmallFormValidator { errMsgs = { required: 'This fiel ...

Combining strings with JQuery

Looking for help with a code snippet <script> function goToDetails($i){ $(function(){ var transValue = $('#trans'+$i).html(); var mileageValue = $('#mileage'+$i).html(); var engineValue = $('#eng'+$i).html ...

Creating a jquery DataTable from HTML generated by angular $sce can be done by following these steps

I have created an Angular controller that takes data and generates an HTML table from it. The generated table is being displayed on the page. Now, I want to apply jQuery data tables using that scope variable. The variable contains the HTML code of the tabl ...

What could be causing the malfunction of my Superfish menu in Firefox?

I am currently experimenting with the Superfish jQuery plugin to improve a drop-down menu on my website. Unfortunately, in Firefox browser (v. 21.0), the drop-down menu does not open when hovering over it as expected. However, it works fine in Chrome and O ...

Steps to create two jQuery dropdown filters for multiple identifiers:

Is it possible to create two dropdown menus that can be used to filter a gallery of images? I am currently facing an issue where the filtering functionality is not working after adding a name attribute to the image IDs. When I select an option from the s ...

Positioning Avatar component at the center of Card component

Hello there, I am currently trying to center my <Avatar> elements using Material UI with React within the <Card> components. The layout appears very crowded right now. What would be the most effective method to achieve this? I attempted setti ...

Challenge with Filter Functionality when Activating Button

Can you help me implement a search filter using buttons with the Isotope Plugin? For example, entering a search value in an input field and then clicking a search button to display the search results. How can I achieve this using buttons? Below is the H ...

Unable to `.catch()` an error while utilizing Jquery.ajax().then()

My current project involves making calls to various APIs using JQuery and caching the response from each API. This cached data is then used multiple times on the page to create different dashboard widgets. The issue I'm facing is that if an API retur ...

ng-model to interact with dynamically loaded elements

My dynamic list contains various items, such as cars, and is not of fixed length. Upon loading, the list appears as follows: itemList = [ { id: 0, name: 'bmw' }, { id: 1, name: 'audi' }, { id: 3, name: 'vw' }, ...

What are the essential files needed in Kendo UI Core for a mobile app?

Several months ago, I created a trial Kendo mobile app but now I want to verify it using the most recent version of Kendo UI Core. In my previous project, I referenced the following files: <link href="../styles/kendo.common.min.css" rel="stylesheet" / ...

(NodeJS + Socket IO Issue) NodeJS is sending duplicate data when the page is refreshed, causing an improper response

Each time I refresh a page, NodeJS seems to be repetitively writing data on the socket. Interestingly, the number of writes increases with each page refresh but then stabilizes at three after several refreshes. I urge you to inspect the console output whi ...

Create a form with two submission buttons along with a captcha verification system

I'm currently developing a booking page form that requires a unique functionality. I need a single form where clients can enter their information, followed by two submit buttons at the bottom. The first button should hold their reservation for 72 hour ...

Issue with React Google Maps Api: Error occurs while trying to access undefined properties for reading 'emit'

I'm trying to integrate a map using the google-map-react API, but I keep encountering the following error: google_map.js:428 Uncaught TypeError: Cannot read properties of undefined (reading 'emit') at o.r.componentDidUpdate (google_map.js: ...