Determine the currently active view on a mobile device

Question

Determine the currently active view on a mobile device

I am trying to determine whether the user is viewing the website vertically or horizontally on their mobile device or iPad in order to adjust the image scale accordingly.

For example:

If the user is viewing the page horizontally, I want the image style to be set as follows:

img{width:100%; height:auto;}

But if the user is viewing the page vertically, the CSS for the image should be:

img{width:auto; height:100%;}

How can I achieve this functionality using jQuery, JavaScript, media queries, or any other method so that I can apply the appropriate style based on the user's viewing orientation on their mobile or iPad?

Thank you.

jquery css mobile

Answer 1

Answer №1

If you want to determine the orientation using JavaScript, you can implement the following script:

detectOrientation();
    window.onorientationchange = detectOrientation;
    function detectOrientation(){
        if(typeof window.onorientationchange != 'undefined'){
            if ( orientation == 0 ) {
                 //Execute code for Portrait Mode
            }
            else if ( orientation == 90 ) {
                 //Execute code for Landscape Mode
            }
            else if ( orientation == -90 ) {
                 //Execute code for Landscape Mode
            }
            else if ( orientation == 180 ) {
                 //Execute code for Landscape Mode
            }
        }
    }

Snippet obtained from

Answer 2

If you want to determine the orientation using JavaScript, you can implement the following script:

detectOrientation();
    window.onorientationchange = detectOrientation;
    function detectOrientation(){
        if(typeof window.onorientationchange != 'undefined'){
            if ( orientation == 0 ) {
                 //Execute code for Portrait Mode
            }
            else if ( orientation == 90 ) {
                 //Execute code for Landscape Mode
            }
            else if ( orientation == -90 ) {
                 //Execute code for Landscape Mode
            }
            else if ( orientation == 180 ) {
                 //Execute code for Landscape Mode
            }
        }
    }

Snippet obtained from

Answer 3

Answer №2

Have you considered implementing responsive CSS with specific breakpoints?

Here's an example:

@media screen and (max-width: 123px /* adjust as needed */ ) {
  img{width:auto; height:100%;}
}

Answer 4

Have you considered implementing responsive CSS with specific breakpoints?

Here's an example:

@media screen and (max-width: 123px /* adjust as needed */ ) {
  img{width:auto; height:100%;}
}

Determine the currently active view on a mobile device

Answer №1

Answer №2

Similar questions

Clear existing markers from the map before inserting new markers

Double-checked in p:commandButton, encountering a race condition with oncomplete

Creating a Jquery function to clone a select element with an inline onchange event and handle multiple ajax requests

Issues with inconsistent behavior of the select option in a form

What is the process for altering the background color of a modal?

The element div is not permitted as a child of the element h5 in this particular scenario

A guide on utilizing jQuery to select a checkbox by accessing a Laravel variable

Validating file extensions using Jquery during file uploads

What's the Best Way to Add a Border to My Two-Column Form?

Despite implementing an event listener, the Google Maps API is failing to resize properly when created using AJAX

Position a dynamic <div> in the center of the screen

Discovering the exact measurement of "remaining space" in absolute units with flexbox techniques

An unexplained line break is being added to content loaded via ajax requests

What is the best way to monitor the status of several Fine Uploader instances at once?

Checking Whether a Value Entered in an Input Field Exists in an Array Using jQuery

Ensure that each of the two divs maintains a 16:9 aspect ratio, and utilize one div to fill any remaining empty space through the

Skipping code in JavaScript/jQuery function on window load

Discovering the pixel value of scrolled distance (scroll delta) using jQuery scroll event

I am experiencing an issue where the close button image on tap is not closing on the first tap on

Obtaining the field name from a SQL Server database by utilizing the field ID