jquery mobile - android手机上的视口值答案

【问题标题】：jquery mobile - viewport value on android phonesjquery mobile - android手机上的视口值
【发布时间】：2012-09-11 20:03:39
【问题描述】：

我是 Jquery Mobile 的新手，我真的不明白如何设置视口值来正确渲染图像。这是我的测试步骤：

我准备了一张 480x432 的图像。
我写了一个这样的测试页：

<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 上运行，如下所示：

你可以看到图片很合适，但是按钮和标签文本太小了。

4。我在viewport 值设置中删除了target-densitydpi=device-dpi，我的应用如下所示：

您可以看到按钮和标签文本很好，但是图像溢出。

我的问题：

为什么当我使用某些视口值时，我得到的页面宽度/高度和端口宽度/高度值与紫色块中的值一样？
建议的视口值是多少以及如何处理图像的宽度/高度？

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

【问题讨论】：

标签： android jquery mobile

【解决方案1】：

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

我的理解是，您无法知道用户正在使用什么移动设备，因此无法知道可用的视口大小。您使用 JavaScript 检测大小的方法很好并且有效。在获得视口大小然后加载自定义创建的图像后，您不能只对您的服务器进行 Ajax 调用吗？

【讨论】：

【解决方案2】：

请用"em"中的宽高单位代替像素，试一试。不同设备的像素比例不同，因此设备中的像素渲染不会相同。

【讨论】：

问题是 - 在我的情况下，我将尝试在服务器端生成一个应该尽可能多地使用可用屏幕空间而不重新调整大小的图像。要生成图像，我需要知道可用视口的实际像素尺寸。