Geek Answers Handbook

JQuery mobile - viewing cost on android phones

I'm new to jQuery Mobile, and I really don't understand how to set the viewport value to display the image correctly. Here are my steps to check:

  • I prepared one image with a size of 480x432. enter image description here
  • I wrote a test page as follows:
<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 application works on my Samsung Galaxy SII, as shown below: enter image description here

As you can see, the image fits well, but the buttons and shortcut texts are too small.

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

enter image description here

As you can see, the buttons and text labels are good, but the image is full.

My questions:

  • Why do I get page width / height values ​​and port width and height values, such as values ​​in purple blocks when I use a specific view view value?
  • What is the recommended viewport value and how to handle image width / height?

I know that the width / height of the image is pixels, but the screen of the Android phone does not use this, but still I'm not sure how to resize the images to fit the screen.

+4
source share
2 answers

If you use target-densitydpi = device-dpi, the mobile browser provides its own available pixels. If you do not use target-densitydpi = device-dpi, the mobile browser will scale / scale the page.

I understand that you cannot know which mobile device the user is using, and therefore cannot know the available size of the viewport. Your JavaScript sizing approach is good and works. Can't you just make an Ajax call to your server after getting the viewport size and then upload the custom created image?

+1
source

Please use the width and height block in "em" instead of a pixel and try. The pixel ratio is different for different devices and therefore px will not be displayed on devices.

0
source

More articles:


All Articles