All geek questions in one place

Resize image to fit portrait and landscape in jquerymobile?

I need to add an image to the title and background. Is it possible to automatically resize the image in accordance with the orientation of the screen (portrait and landscape). I set the image in portrait resolution, but when I change the screen to Landscape, the image does not change. Can someone give me some recommendations?

+4
source share
4 answers

Support for this is built into jQuery Mobile. There are two Orientation Classes that are present depending on the current screen orientation:

.portrait { /* portrait orientation changes go here! */ } .landscape { /* landscape orientation changes go here! */ }

Or, if you want a javascript event, you can bind to changechange .

+6
source

I do not think that there are events that fire when the phone goes to the landscape for a portrait. However, you can write a custom function to find out the current orientation. Write the following code in the window.resize event.

 $(window).resize( function(){ var height = $(window).height(); var width = $(window).width(); if(width>height) { // Landscape $("#img").attr("src","landscapeurl"); } else { // Portrait $("#img").attr("src","portraiturl"); } });

code here

+5
source

We recommend using CSS3 media queries because the jQuery mobile class orientation classes are deprecated: http://jquerymobile.com/demos/1.0b2/docs/api/mediahelpers.html

To demonstrate CSS3 media queries: http://www.webdesignerwall.com/demo/media-queries/

+2
source

I use this css3 rule:

@media (orientation: landscape) {

 #home-feature span { display : inline-block; }

}

Additional information: http://www.w3.org/TR/css3-mediaqueries/

+1
source

Source: https://habr.com/ru/post/1341630/

More articles:


All Articles