CODEWITHSUNDEEP
androidjquerymobile
Lenciel
Lenciel

Reputation: 553

jquery mobile - viewport value on android phones

I'm new to Jquery Mobile and I really don't understand how to set the viewport value to get the image correctly rendered. Here is my steps to test:

  1. I prepared one image which is 480x432. enter image description here
  2. I wrote a test page like this:
<html>
<head>    
<meta name="viewport" content="initial-scale=1.0, target-densitydpi=device-dpi，width=device-width, minimum-scale=0.1, user-scalable=no"/>
<link href="style/jquery.mobile.theme-1.1.1.min.css" rel="stylesheet" type="text/css"/>
<link href="style/jquery.mobile.structure-1.1.1.min.css" rel="stylesheet" type="text/css"/>    
 <script src="js/jquery.js" type="text/javascript"></script>
 <script src="js/jquery.mobile-1.1.1.min.js" type="text/javascript"></script>
</head>
<body style="margin:0;">
<div data-role="header" data-position="fixed" data-theme="f">
<a href="sm_app_home.html" data-theme="a" data-mini="true" data-icon="home" class="ui-btn-left">Home</a>
<a href="sm_app_home.html" data-theme="a" data-mini="true" data-icon="gear" class="ui-btn-right">settings</a>  
</div>  
    <div data-role="content">
    <div id="bld" class="bld" style="position: absolute; width: 250px; height: 125px; left: 161px; background-color: #ccccff; top: 185px;">Hello world.</div>
    <img id="bl1" src="img/sc_museum/480x432.jpg" />
</div>
<script>
    $("#bl1").click(function(){
    var pageWidth = $(document).width();
    var pageHeight = $(document).height();
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    $("#bld").html("Page width: "+pageWidth+"<br />pageHeight: "+pageHeight+"<br />port width: "+viewportWidth+"<br />port height: "+viewportHeight);
});
</script>
</body>
</html>

3. The app runs on my Samsung Galaxy SII like below: enter image description here

As you can see the image fits good but the buttons and label texts are too tiny.

4. I removed target-densitydpi=device-dpi in the viewport value setting and my app looks like below:

enter image description here

As you can see the buttons and label texts are good, however the image overflows.

My questions:

  1. Why I get the page width/height and port width/height values like the values in the purple blocks when I use certain viewport value?
  2. What is the suggested viewport value and how to deal with the image width/height?

I know the image width/height are pixels but the android phone screen is not using that, but still I'm not sure how to resize the images to fits the screen.

Upvotes: 4

Views: 2476

Answers (2)

Tsunamis
Tsunamis

Reputation: 6230

If you use target-densitydpi=device-dpi the mobile browser provides the native available pixels. If you don't use target-densitydpi=device-dpi the mobile browser scales/zooms the page.

My understanding is that you cannot know what mobile device the user is using and therefor cannot know the available viewport size. Your approach to detect the size with JavaScript is good and working. Can't you just make an Ajax call to your server, after you got the viewport size and then load a custom created image?

Upvotes: 1

IvenMS
IvenMS

Reputation: 535

Please use the width and height unit in "em" instead of pixel and give a try. The pixel ratio is different for different devices and so px will not render same in devices.

Upvotes: 0

Related Questions