手机上的缩放比例错误 - 网站半宽/高=全屏

时间:2013-09-30 10:43:00

标签: cordova screen screen-resolution phonegap-build muse

所以对我之前的帖子进行了一些跟进,但内容很新......以及情况的变化。

所以我正在创建一个Android应用程序,通常通过记事本在Adobe Muse 中编写,但这次更容易找到Muse 并将所有文件配置为Phone,分辨率为1280x720。我的测试设备是HTC one X,屏幕分辨率为1280x720。完成所有代码后,我将它在Adobe Phonegap中编译成APK并在手机上安装。

事实上,我在muse(site @ 1280x720)中写的内容应该是我手机屏幕上的1:1。但事实并非如此。实际上,它以2倍大小显示所有内容。我可以在屏幕上滚动..

事实上,我已经创建了第二个版本*,只有一个主页和一个图像,使用整个画布,但我已经制作了一个正好是原始尺寸的一半;因此是360x760的画布。编译并再次安装,确实猜测:没有滚动,图像占据全屏。

通过其他含义:在路上的某个地方,我的手机认为屏幕尺寸为实际尺寸的一半(360x640)(1280x720)。

我用

进行了快速测试
<meta name="viewport" content="user-scalable=no, width=device-width,  initial-scale=0.5, minimum-scale=0.5,  maximum-scale=0.5"/>

希望它能在某种程度上适合整个屏幕“一半”,但没有运气。

所以伙计们:我在这里,所有人都迷失了,不再有任何线索了。谁可以帮助我使用有效的HTML / CSS / JS配置,或者如果问题在于手机间隙配置,请帮助我那边?

点击here下载网站文件和已编译的APK以自行测试。注意:如果您在手机上安装APK(而不是模拟器)并且屏幕尺寸与1280x720不同,当然会进行滚动。

P.S。我做了第二个测试版本,只有一个分辨率为480x800的主页,上面只有一个图像,并在三星S3迷你上测试了它(屏幕分辨率为480x800),还有整个事情似乎是2倍规模......我真的输了。

p.p.s。别人说“记住,你还有状态栏”。对于那些想法相同的人:我已将其设置为全屏,隐藏状态栏并使用全屏。

1 个答案:

答案 0 :(得分:2)

解决了(y)我们的问题:

  • 打开“src / com.company.yourapp / YourApp.java”下的YourApp.java
  • 将以下代码放在loadUrl()调用
  • 下面
  

//视口设置WebSettings settings = appView.getSettings();   settings.setUseWideViewPort(真);
  settings.setLoadWithOverviewMode(真);

  • 打开index.html并(重新)放置视口metatag
<meta name="viewport" content="target-densitydpi=medium-dpi, user-scalable=no, initial-scale=0.5, minimum-scale=0.5, width=device-width" />