我是 Jquery Mobile 的新手,我真的不明白如何设置视口(viewport)值以正确呈现图像。这是我的测试步骤:
- 我准备了一张 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。 该应用程序在我的 Samsung Galaxy SII 上运行,如下所示:
如您所见,图像很合适,但按钮和标签文本太小了。
4.
我在 viewport
值设置中删除了 target-densitydpi=device-dpi
,我的应用如下所示:
如您所见,按钮和标签文本很好,但图像溢出了。
我的问题:
- 为什么我在使用特定视口(viewport)值时得到页面宽度/高度和端口宽度/高度值,如紫色 block 中的值?
- 建议的视口(viewport)值是多少以及如何处理图像宽度/高度?
我知道图像的宽度/高度是像素,但 android 手机屏幕没有使用它,但我仍然不确定如何调整图像的大小以适合屏幕。
最佳答案
如果您使用 target-densitydpi=device-dpi,则移动浏览器会提供 native 可用像素。如果您不使用 target-densitydpi=device-dpi,则移动浏览器会缩放/缩放页面。
我的理解是,您无法知道用户使用的是哪种移动设备,因此也无法知道可用的视口(viewport)大小。您使用 JavaScript 检测大小的方法很好并且有效。在获得视口(viewport)大小然后加载自定义创建的图像后,您不能只对服务器进行 Ajax 调用吗?
关于android - jquery mobile - Android 手机上的视口(viewport)值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11831519/