使内容缩放并适合PhoneGap（使用视口） [英] Make content to scale and fit with PhoneGap (using viewport)
问题描述
到目前为止，该项目在Android浏览器下可以正常工作，但它没有与PhoneGap，因为它不适应内容适合整个屏幕。它总是留下一个空白，这不是我想要的。 PhoneGap似乎并不关注我在我使用的元标记中的视口属性。
我已经做了一些测试找出问题没有任何类型的结果。
例如，以下测试只包含两个文件：index.html和config.xml
包含一个宽度为276像素的DIV，我希望PhoneGap能够像Android浏览器一样适合整个页面。
顺便说一句，我使用PhoneGap Build网站建立这个测试在线。
这里是index.html文件的内容（我没有使用DOCTYPE使它更简单，但即使使用它不会工作正常）：
< html>
< head>
< meta name =viewportcontent =width = 276，user-scalable = yes/>
< title>标题< / title>
< / head>
< body>
< div style =width：276px; background-color：orange;>我想让这个div适合页面< / div&
< / body>
< / html>
这是config.xml文件的内容（注意偏好EnableViewportScale设置为true ，但是即使设置为yes也不起作用）：
<？xml version =1.0encoding = UTF-8？>
< widget xmlns =http://www.w3.org/ns/widgets
xmlns：gap =http://phonegap.com/ns/1.0
id =com.phonegap.example
versionCode =10
version =1.0.0>
<！ - versionCode是可选的，仅限Android - >
< name> PhoneGap示例< / name>
< description>
phonegap构建文档的示例。
< / description>
< author href =https://build.phonegap.comemail =support@phonegap.com>
Hardeep Shoker
< / author>
< preference name =EnableViewportScalevalue =true/>
< / widget>
有什么我做错了吗？我如何描述我想做什么？我相信它应该有一个很简单的解决方案，但我现在找不到它了。
非常感谢你，对不起我的英语，这不是我的
我几乎放弃了，当我偶然发现这个帖子：
http://antonylees.blogspot.com/2012/06/phonegap-viewport-size-is-too-small-on.html
基本上我修改了我的默认AndroidManifest.xml条目：
< uses-sdk android：minSdkVersion = 10android：targetSdkVersion =19/>
到
< uses-sdk android：minSdkVersion =7/>
您可以使用一个lil位版本。只是不要针对版本19我猜。此外，您可以添加
target-densitydpi = device-dpi
target-densitydpi = medium-dpi
...
到您的元视口标签，取决于您想要做什么。 p>
编辑：
好吧，这里有一个exploanation： http://developer.android.com/guide/webapps/migrating.html
自Android 4.4（KitKat）以来，WebView已更改与新的基于铬。注意：如果你的targetSdkVersion设置为18或更低，那么你的目标版本低于19，webview将设置为quirks模式。
WebView
在quirks模式下运行，以避免一些行为
更改描述如下，尽可能接近，同时仍然提供
您的应用程序的性能和Web标准升级。 但是，请注意，
的单列和窄列布局和默认缩放级别在Android 4.4上不支持
，并且可能存在其他行为
差异尚未被识别，因此请确保在Android 4.4或更高版本上测试您的应用程序
，即使您的targetSdkVersion设置为
18或更低。
PP：使用LG L70手机。
I am trying to adapt and port an old project to PhoneGap.
So far, the project works properly under Android browsers but it doesn't with PhoneGap since it doesn't adapt the content to fit the whole screen. It always leave a blank space and that's not what I would want. PhoneGap doesn't seem to pay attention to my viewport property in the metatag I am using.
I have been doing some tests to find out the problem without any kind of result.
For example, the following test just contains two files: index.html and config.xml
It contains a DIV that is 276 pixels width and I would want PhoneGap to make it fit the whole page as the Android browsers do.
By the way, I am using PhoneGap Build web site to build this test online.
Here is the content of the index.html file (I am not using DOCTYPE to make it simpler but even using it won't work properly):
<html>
<head>
<meta name="viewport" content="width=276, user-scalable=yes" />
<title>Title</title>
</head>
<body>
<div style="width:276px; background-color:orange;">I want to make this div fit to the page</div>
</body>
</html>
And this is the content of the config.xml file (note the preference EnableViewportScale set to "true", but even being set to "yes" won't work):
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.phonegap.example"
versionCode="10"
version = "1.0.0">
<!-- versionCode is optional and Android only -->
<name>PhoneGap Example</name>
<description>
An example for phonegap build docs.
</description>
<author href="https://build.phonegap.com" email="support@phonegap.com">
Hardeep Shoker
</author>
<preference name="EnableViewportScale" value="true" />
</widget>
So that is. Is there anything that I am doing wrong? How can I archieve what I am trying to do? I am sure it should have a pretty simple solution but I can't find it right now.
Thank you very much in advance and sorry about my English, it's not my native language.
Cheers, Joan
I almost gave up, when I stumbled upon this post: http://antonylees.blogspot.com/2012/06/phonegap-viewport-size-is-too-small-on.html
Basicly I modified my default AndroidManifest.xml entry from:
<uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19" />
to
<uses-sdk android:minSdkVersion="7" />
You may play with the version a lil bit. Just don't target version 19 I guess. Plus you may add
target-densitydpi=device-dpi
target-densitydpi=medium-dpi
...
To your meta viewport tag, depending on what you're trying to do.
EDIT: Ok, here's an exploanation: http://developer.android.com/guide/webapps/migrating.html Since Android 4.4 (KitKat), WebView has changed with new one based on chromium. By having target version below 19, webview is set in quirks mode.
Note: If your targetSdkVersion is set to "18" or lower, WebView operates in "quirks mode" in order to avoid some of the behavior changes described below, as closely as possible—while still providing your app the performance and web standards upgrades. Beware, though, that single and narrow column layouts and default zoom levels are not supported at all on Android 4.4, and there may be other behavioral differences that have not been identified, so be sure to test your app on Android 4.4 or higher even if you keep your targetSdkVersion set to "18" or lower.
PP: Using LG L70 phone.
这篇关于使内容缩放并适合PhoneGap（使用视口）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
