CODEWITHSUNDEEP
jquery-uilandscapejquery-mobileportrait
Lakshmanan
Lakshmanan

Reputation: 1669

resize the image according to the portrait and landscape in jquerymobile?

I have to add image on the header and background . Is it possible to set the image automatically resizing according to the screen orientation (portrait and Landscape). I set the image in portrait resolution , But when i change the screen to Landscape the image not resized. Can anyone give me some guidelines?

Upvotes: 4

Views: 16708

Answers (4)

sschat
sschat

Reputation: 11

i use this css3 rule:

@media (orientation: landscape) {

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

}

more info: http://www.w3.org/TR/css3-mediaqueries/

Upvotes: 1

bafromca
bafromca

Reputation: 1946

It's recommended to use CSS3 media queries as the jQuery mobile orientation classes are deprecated: http://jquerymobile.com/demos/1.0b2/docs/api/mediahelpers.html

For a demo of CSS3 media queries: http://www.webdesignerwall.com/demo/media-queries/

Upvotes: 2

John Slade
John Slade

Reputation: 13052

Support for this is built into jQuery Mobile. There are two Orientation Classes which 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 orientationchange.

Upvotes: 6

Arun
Arun

Reputation: 3077

I don't think there are events that get triggered when the phone goes for landscape to portrait.You can however write a custom function to find out the current orientation. Write the following code on 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 from Here

Upvotes: 5

Related Questions