解决PhoneGap不支持viewport的几种方法

前几天用phonegap编译GameBuilder+CanTK时，发现HTML里的viewport无效。CanTK根据devicePixelRatio检测设备的DPI，然后用viewport设置正确的分辨率。如果viewport无效，CanTK只能以最低分辨率运行。在网上查了一下, 也没有找到系统的资料，但我知道WebView一定有相应的设置来启用viewport，结合找到的资料和phonegap的源码，终于找到了解决方法，这里总结一下：

iOS平台的解决方法：在phonegap的config.xml中增加一行配置：

<preference name="EnableViewportScale" value="true"/>

(奇怪的是此方法对android平台无效，我看了CordovaWebView.java，里面没有相关设置)

android 平台的解决方法一：修改CordovaWebView.java：

  settings.getUserAgentString();
   //增加下面两行代码：
  settings.setUseWideViewPort(true);
  settings.setLoadWithOverviewMode(true);

android 平台的解决方法二：直接修改CordovaWebView.java是个好办法，但是GameBuilder+CanTK支持phonegap的云编译，没有法直接修改CordovaWebView.java。我想到了phonegap插件，找到了一个ViewPortScale的插件，发现根本编译不了，所以自己写了一个com.tangide.viewport的插件，如果里使用GameBuilder+CanTK提供的云编译，已经内置了这个插件。插件的源码在这里：

https://github.com/drawapp8/ViewPort

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接

赞 (0)

相关推荐

  • 自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结

    一.先明白几个概念 phys.width: device-width: 一般我们所指的宽度width即为phys.width,而device-width又称为css-width. 其中我们可以获取phys.width即width通过document.documentElement.clientWidth;而获取css-width通过 window.screen.width获取.如iphone6的phys.width为750px,而css-width为375px. 二.明白一个浏览器默认行为. 试

  • 深入理解移动前端开发之viewport

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备. 一.viewport的概念 通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览

  • 通过viewport实现jsp页面支持手机缩放

    要加入<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"> 标签 其中个属性的意思: width :- viewport的宽度 height: - viewport的高度 initial-scale: - 初始的缩放比例 minimum-scale: -

  • APP添加CNZZ统计插件教程 Android版添加phonegap

    KeyMob移动广告平台是精准稳定的广告SDK.移动广告平台,致力于塑造国内最具有影响力的移动广告平台.主营移动广告服务,横跨IOS.Android两大平台,包含横幅.插屏.全屏.视频广告.banner等多种广告形式. 一.导入JAR包 使用Eclipse进行开发的用户,首先将下载的MobileProbe.jar解压到本地工程目录下的libs子目录里面(例如,您的工程目录为,D:workspaceXXproject,请将MobileProbe.jar放入D:workspaceXXprojectl

  • Android使用phonegap从相册里面获取照片（代码分享）

    话不多说,请看代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Take a Photo</title> <script type="text/javascript" charset="UTF-8" src="cordova.js"></script> &

  • ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

    ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

    通过此文能学习到如下内容 1.创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展的,或者他会与其他控件之间有关系. 面板由一个工具栏.一个底部工具栏.面板头部.面板尾部和面板主区域几个部分组成.面本类中还提供了面板展开.关闭等功能.并提供了一些可重用的工具按钮让我们灵活的控制面板.面板可以放入其他任

  • Phonegap使用拍照功能时的内存问题

    使用phonegap的拍照功能时,安卓机会出现崩溃现象,这一问题的原因也许是你的手机内存不足,实际上却不是phonegap的问题,它也是原生android apps的一个普遍问题. 产生这一问题是因为,在触发拍照时,android activity(相当于当前窗口)转入后台(OnStop状态)然后等待拍照,于是垃圾回收程序执行并杀死activity以释放内存,当拍照完成,你的activity已经死亡,这就是为什么app重启的原因. 建议:替换cramer插件,使用专门定制的插件避免启动垃圾收集

  • phonegap教程使用jspdf库在应用中生成pdf文件(pdf生成方法)

    首先在命令行创建一个PhoneGap工程 复制代码 代码如下: phonegap create . "jspdf.sample" "JSPDF App"phonegap local plugin add org.apache.cordova.filephonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git 然后,下载JSPDF代码 down

  • 关于viewport,Ext.panel和Ext.form.panel的关系

    Ext.panel 可以存放很多元素,最常见的是Ext.form.formPanel对象,也可以用borderlayout布局 下面是我写的一个小例子,顶级容器不是viewport而是tabpanel 复制代码 代码如下: //一个普通的表单 var frm = new Ext.form.FormPanel({ defaultType: 'textfield', labelAlign: 'right', title: 'form1-center', labelWidth: 50, frame:

  • android判断phonegap是否联网且加载super.loadUrl网址

    复制代码 代码如下: public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.setIntegerProperty("splashscreen", R.drawable.splash); ConnectivityManager cwjManager=(ConnectivityManager)getSystemService(Context.CONNECTIVI

随机推荐