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.

jquerycssmobile

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

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%;}
}

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

Transforming a base64 encoded string into a byte array

I have implemented a form where users can upload images to the page using an <input id = "fileLoader" type = "file" />. With JavaScript, I convert these uploaded images to base64 and send them to the server. On the server side, I need to decode this ...

javascriptjqueryajaxasp.net-mvcbase64

Arranging xCharts based on the weekday order

Struggling with xCharts, specifically trying to display a bar chart showing numbers with corresponding days of the week in order. Despite my efforts, I can't seem to get them to appear in the correct sequence. Refer to the image below for reference: ...

javascriptjqueryjsonchartsbar-chart

Discovering more about this topic

Looking for a way to create an expandable box that enlarges when "read more" is clicked, revealing text below it. And also looking to add a button that closes the expanded text back up. Experimented with the toggletext JavaScript command, as found on this ...

javascriptcsstextspry

What is the best method for enlarging the central image in Owl Carousel?

Could someone help me with implementing Owl Carousel to achieve this design? I have attempted it, but unfortunately, it is not working as expected. Your assistance in fixing the issue would be greatly appreciated. Please find the necessary code below: ...

jqueryhtmlcss

Top Margin: Supported by Chrome and Safari

After troubleshooting why the margin-top is not working on Safari, but works fine on Chrome, I discovered a discrepancy. Chrome Upon hovering over an item in the image, the cursor changes as expected. This feature operates smoothly in Chrome. https://i. ...

javascriptphphtmlcss

Having trouble with the Ajax loop callback method functioning properly for each individual request

While working with an ajax each loop, I encountered a problem with the callback function. The success or progress callbacks do not seem to be functioning properly for each request made. The first and second callbacks are failing to execute. entries.forEa ...

jqueryajaxjquery-events

Expansive picture feature within jQuery Mobile

I need help with displaying a large image (685 × 900, only 25kb in PNG) in the 'content' section so that it adjusts automatically for different screen sizes and allows users to zoom in using their fingers. Currently, I have this code: < ...

jqueryhtmlcssjquery-mobile

iOS fixed positioning and scrolling

One of the current challenges we are facing involves implementing an action button similar to the one found in GMail for adding new content. This button needs to remain fixed during scroll. Here is the HTML code: <div class="addButton actionButton" on ...

javascriptioscsscss-position

"Utilizing jQuery's AJAX POST method with PHP is successful, while using XMLHttpRequest is not yielding

Currently in the process of revamping my existing code to transition from jQuery's AJAX function to using XMLHttpRequest in vanilla JS. My understanding is that the following code snippets should be equivalent. However, while the jQuery version functi ...

javascriptjqueryajaxxmlhttprequest

Adjusting the style attributes for Material-UI Icons

I could use some assistance with changing the CSS property of MUI icons in order to assign a specific color when the icon is focused. I have implemented the icons in the header and am displaying different pages below them, so I would like to give each ac ...

cssmaterial-ui

Utilizing PHP to send arrays through AJAX and JSON

-I am facing a challenge with an array in my PHP file that contains nested arrays. I am trying to pass an integer variable (and may have to handle something different later on). -My objective is to make the PHP file return an array based on the incoming v ...

javascriptphpjqueryajaxjson

Is it possible to organize and filter a dropdown menu in JQuery based on a secondary value (new attribute)?

Can the drop-down list be sorted by value2? <select id="ddlList"> <option value="3" value2="3">Three</option> <option value="1" value2="1">One</option> <option value="Order_0" value2="0">Zero</option> </sele ...

javascriptjquery

What causes the lack of upward movement for a div element when the div above it is floated to the left?

Recently, I've been delving into the world of float property in CSS. This is the HTML code snippet I'm working with: .left { float: left; text-align: center; width: 25%; } .normal { text-align: center; width: 25%; } <div class="lef ...

htmlcsswebcss-float

Tips on using Ajax to post in HTML

Here is the code I have been working on: <script type="text/javascript"> var xmlDoc; var xmlhttp; function loadRates() { xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = readRates; xmlhttp.open("GE ...

javascriptjqueryhtmlajax

The H1 tag fails to appear on the webpage

I can't figure out why my H1 is not visible. It seems to be hidden by a div. What's strange is that the parent div is visible when I change the background color to something other than transparent. Even an input tag within the same div displays c ...

htmlcsssasscss-animations

What is the best way to connect a relative CSS stylesheet to a master page?

My Java application generates several HTML pages, organized in different directories: html_pages/ | ----> landin_page.html html_pages/details | ----> index1.html html_pages/more_details | ----> index2.html html_pages/css | ...

javascripthtmlcss

Create a VueJS/VuetifyJS implementation inspired by the WhatsApp swipe between tabs animation

Currently, I am utilizing the VuetifyJS framework for VueJS and I am interested in replicating the swipe between tabs transition seen in WhatsApp for Android. In WhatsApp, you have the ability to swipe left or right to view a new section as you swipe. Vue ...

javascriptmobilevue.jsswipevuetify.js

What is the best way to implement a modal that can toggle dark mode using the Konami code, with the added functionality of a close button?

Recently, I attempted to create a Modal window that would activate when the Konami code (↑↑↓↓←→←→BA) is typed. As someone new to JavaScript, I'm still learning and open to feedback. While I have the coding part figured out, I need assi ...

javascripthtmljquerycssmodal-dialog

The content is stationary as the side menu slides open and closed

I have successfully implemented a sliding side menu in my angularjs+bootstrap3 app using CSS. However, I am facing an issue where the content on the right side does not follow the menu when it slides out of view. Here is the desired effect that I am aimin ...

jqueryangularjscsstwitter-bootstrapangularjs-directive

Establish height and width parameters for creating a dynamic and adaptable bar chart with recharts

I am currently facing an issue with recharts while trying to implement a BarChart. The setting width={600} and height={300} is causing the Barchart to be fixed in size, rather than responsive. How can I make the BarChart responsive? I attempted using per ...

javascriptcssreactjsmaterial-uirecharts