Response title
This is preview!
How to align the image in landscape and portrait orientation in ipad
in Developing jQuery Mobile
•
11 years ago
Hi,
I have designed the website for ipad device using mobile jquery.
I have added slideshow in the home page. The image size is 800 * 970. While viewing in portrait mode, the image is shown fully but while viewing in landscape mode, the image is shown half and scroll appears on the right.
Can anyone help me to view the image without scrolling in landscape mode on ipad device.
I have added the code below,
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name ="viewport" content ="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<!-- FlexSlider pieces -->
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>-->
<script src="jquery.flexslider-min.js"></script>
<style>
.ui-listview, .ui-li {
list-style: none outside none;
background:#c19651;
text-shadow:none;
}
</style>
<!-- Hook up the FlexSlider -->
<!--<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>-->
<script type="text/javascript">
$('#homepage').live('pageinit',function(){
$('.flexslider').flexslider();
});
</script>
</head>
<body>
<div data-role="page" id="homepage">
<div data-role="content">
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li><img src="images/image.jpg" width="100%" />
</li>
<li><img src="images/image2.jpg" width="100%" />
</li>
<li><img src="images/image3.jpg" width="100%" />
</li>
</ul>
</div>
</div>
<br/>
<br/>
</div>
</div>
</body>
</html>
I have designed the website for ipad device using mobile jquery.
I have added slideshow in the home page. The image size is 800 * 970. While viewing in portrait mode, the image is shown fully but while viewing in landscape mode, the image is shown half and scroll appears on the right.
Can anyone help me to view the image without scrolling in landscape mode on ipad device.
I have added the code below,
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name ="viewport" content ="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<!-- FlexSlider pieces -->
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>-->
<script src="jquery.flexslider-min.js"></script>
<style>
.ui-listview, .ui-li {
list-style: none outside none;
background:#c19651;
text-shadow:none;
}
</style>
<!-- Hook up the FlexSlider -->
<!--<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>-->
<script type="text/javascript">
$('#homepage').live('pageinit',function(){
$('.flexslider').flexslider();
});
</script>
</head>
<body>
<div data-role="page" id="homepage">
<div data-role="content">
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li><img src="images/image.jpg" width="100%" />
</li>
<li><img src="images/image2.jpg" width="100%" />
</li>
<li><img src="images/image3.jpg" width="100%" />
</li>
</ul>
</div>
</div>
<br/>
<br/>
</div>
</div>
</body>
</html>
1