2012-08-06 50 views
4

我是Jquery Mobile的新手,我真的不明白如何设置视口值以正确呈现图像。这是我的测试步骤:jquery mobile - Android手机上的视口值

  1. 我准备了一个480x432的图像。 enter image description here
  2. 我写了一个测试页面是这样的:
<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. 该应用程序运行在我的三星Galaxy SII象下面这样: enter image description here

正如你所看到的图像很合适,但按钮和标签文本太小了。

4. 我在viewport值设置删除target-densitydpi=device-dpi和我的应用程序看起来像下面:

enter image description here

正如你所看到的按钮和标签文本都不错,但是图像溢出。

我的问题:

  1. 为什么我得到在紫色块类似的值的页面宽度/高度和端口宽度/高度值,当我使用某些视价值?
  2. 什么是建议的视口值和如何处理图像的宽度/高度?

我知道图像的宽度/高度是像素,但android手机屏幕没有使用,但我仍然不知道如何调整图像的大小以适应屏幕。

回答

0

请使用“em”而不是像素的宽度和高度单位,并试一试。不同设备的像素比例不同,因此px在设备中不会变得相同。

+0

问题是 - 在我的情况下,我会试图在服务器端生成一个应尽可能多地使用可用屏幕空间而不用重新调整大小的图像。生成图像我需要知道可用视口的实际像素尺寸。 – pQd 2012-09-06 11:24:45

1

如果您使用target-densitydpi = device-dpi,则移动浏览器会提供本地可用像素。如果您不使用target-densitydpi = device-dpi,则移动浏览器会缩放/缩放页面。

我的理解是,你无法知道用户正在使用什么移动设备,因此无法知道可用的视口大小。您使用JavaScript检测大小的方法非常好,并且很有效。在获得视口大小,然后加载自定义创建的图像之后,您不能仅向服务器发出Ajax调用吗?