草庐IT

android - jquery mobile - Android 手机上的视口(viewport)值

coder 2023-12-23 原文

我是 Jquery Mobile 的新手，我真的不明白如何设置视口(viewport)值以正确呈现图像。这是我的测试步骤:

  1. 我准备了一张 480x432 的图片。
  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。 该应用程序在我的 Samsung Galaxy SII 上运行，如下所示:

如您所见，图像很合适，但按钮和标签文本太小了。

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

如您所见，按钮和标签文本很好，但图像溢出了。

我的问题:

  1. 为什么我在使用特定视口(viewport)值时得到页面宽度/高度和端口宽度/高度值，如紫色 block 中的值？
  2. 建议的视口(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/

机上viewport34gtltandroidjquerymobile

有关android - jquery mobile - Android 手机上的视口(viewport)值的更多相关文章

  1. 安卓apk修改(Android反编译apk) - 2

    最近因为项目需要，需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源，并重新打包，签名生成新的自定义的apk，下面我来介绍一下我的实现过程。APK修改，分为以下几步：反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机（针对系统自带apk,其他软件免root）3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了，直接进入主题：按键win+R输入cmd，打开命令窗口，并将路

  2. ruby-on-rails - 共享主机上的 Rails 应用程序？ - 2

    有没有一种方法可以在安装了Ruby的共享主机上部署本地制作的Rails应用程序？ 最佳答案 部署Capistrano和(Mongrel或Passenger...最好是后者...或者，如果你必须，FastCGI尽管FastCGI在Rails中非常慢)服务。如果您有一个共享主机，您将不得不提供您的Rails版本和所有的gem，因为您可能无权安装gem。即使您这样做了，您也不希望Rails选择旧版本的东西。 关于ruby-on-rails-共享主机上的Rails应用程序？，我们在StackOv

  3. Android Studio开发之使用内容组件Content获取通讯信息讲解及实战（附源码 包括添加手机联系人和发短信） - 2

    运行有问题或需要源码请点赞关注收藏后评论区留言一、利用ContentResolver读写联系人在实际开发中，普通App很少会开放数据接口给其他应用访问。内容组件能够派上用场的情况往往是App想要访问系统应用的通讯数据，比如查看联系人，短信，通话记录等等，以及对这些通讯数据及逆行增删改查。首先要给AndroidMaifest.xml中添加响应的权限配置 下面是往手机通讯录添加联系人信息的例子效果如下分成三个步骤先查出联系人的基本信息，然后查询联系人号码，再查询联系人邮箱代码 ContactAddActivity类packagecom.example.chapter07;importandroid

  4. Android 10.0 设置默认launcher后安装另外launcher后默认Launcher失效的功能修复 - 2

    1.前言 在10.0的系统rom定制化开发中，在系统中有多个launcher的时候，会在开机进入launcher的时候弹窗launcher列表，让用户选择进入哪个launcher，这样显得特别的不方便所以产品开发中，要求用RoleManager的相关api来设置默认Launcher，但是在设置完默认Launcher以后，在安装一款Launcher的时候，默认Launcher就会失效，在系统设置的默认应用中Launcher选项就为空，点击home键的时候会弹出默认Launcher列表，让选择进入哪个默认Launcher.所以需要从安装Launcher的流程来分析相关的设置。来解决问题设置默认La

  5. ruby - 是否可以在 Vagrant 完成所有配置后在虚拟机上运行脚本？ - 2

    我正在使用Vagrantv1.5.1创建虚拟机(VM)集群。在供应了所有VM之后，是否可以在其中一台机器上运行单个脚本？我要运行的脚本将设置从一个VM到所有其他VM的无密码SSH。例如我在Vagrant(CentOS6.5)中配置的节点如下。节点1节点2节点3节点4我的Vagrantfile如下所示。(1..4).eachdo|i|config.vm.define"node-#{i}"do|node|node.vm.box="centos65"...omitted..endend完成所有这些后，我需要在node1上运行一个脚本，以启用到node2、node3和node4的无密码SSH。

  6. ruby - 从命令行通过 capistrano 在远程主机上运行命令 - 2

    有没有办法在不将命令添加到Capfile的情况下在capistrano中运行命令？例子:cap--eval"run'du-sh'"--roleweb 最佳答案 您可以使用它在服务器上运行命令。capROLES=webinvokeCOMMAND='du-sh'如果您甚至没有上限配方，您可以在命令行上指定服务器:cap-suser=myusernameHOSTS=server1.com,server2.cominvokeCOMMAND='du-sh'要查看更多命令行选项，请运行cap-H和cap-einvoke。

  7. ruby - 无法使用 Vagrant 转发端口访问主机上的 Sinatra 应用程序 - 2

    在使用rubyapp.rb和foremanstart启动我的Sinatra应用程序后，我无法使用localhost和主机上的相应端口访问我的应用程序。我还能够从客户机的shell中curl到应用程序，而在主机上curl请求失败。据我所知，guest计算机上不应该安装防火墙，因为我使用的是VagrantUbuntu镜像。我的Vagrantfile如下:Vagrant.configure('2')do|config|config.vm.box='precise32'config.vm.box_url='http://files.vagrantup.com/precise32.box'con

  8. AiBote 2022 新研发的自动化框架，支持 Android 和 Windows 系统。速度非常快 - 2

    Ai-Bot基于流行的Node.js和JavaScript语言的一款新自动化框架，支持Windows和Android自动化。1、Windowsxpath元素定位算法支持支持Windows应用、.NET、WPF、Qt、Java和Electron客户端程序和ie、edgechrome浏览器2、Android支持原生APP和H5界面，元素定位速度是appium十倍，无线远程自动化操作多台安卓设备3、基于opencv图色算法，支持找图和多点找色，1080*2340全分辨率找图50MS以内4、内置免费OCR人工智能技术，无限制获取图片文字和找字功能。5、框架协议开源，除官方node.jsSDK外，用户可

  9. Android Gradle 7.1+新版本依赖变化 - 2

    前一段时间由于工作需要把可爱的小雪狐舍弃了，找到了小蜜蜂。但是新版本的小蜜蜂出现了很多和旧版本不一样的位置。1.功能位置迁移，原来在工程build.gradle的buildscript和allprojects移动至setting.gradle并改名为pluginManagement和dependencyResolutionManagement。里面的东西依旧可以按照原来的copy过来。pluginManagement{repositories{gradlePluginPortal()google()mavenCentral()}}dependencyResolutionManagement{r

  10. ruby - Ruboto 的最佳教程(适用于 Android 的 ruby​​)？ - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于StackOverflow来说是偏离主题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，describetheproblem以及迄今为止为解决该问题所做的工作。关闭9年前。Improvethisquestion我几乎用完了Ruby，但现在想试试Ruboto，android上的ruby​​。谷歌未能给我足够的(几乎没有结果)。所以任何人都可以分享一些关于Ruboto的教程。

随机推荐