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



所以对我以前的线程进行了一些跟进,但内容相当新。以及形势的变化。

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

所以事实上,我在缪斯(网站@ 1280x720(中写的东西在我的手机屏幕上应该是1:1。然而,事实并非如此。事实上,它以 2 倍的大小显示所有内容。我可以在屏幕上滚动。

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

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

我做了一个快速测试

<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配置,或者如果问题出在电话间隙配置上,请在那里帮助我?

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

附言我制作了第二个测试版本,只有一个分辨率为 480x800 的主页,上面只有一个图像,并在三星 S3 mini 上进行了测试(屏幕分辨率为 480x800(,而且整个事情似乎缩放了 2 倍。我真的迷茫了。

p.p.s.其他人说"记住,你仍然得到了状态栏"。对于那些有同样想法的人:我已将其设置为全屏,隐藏状态栏并使用全屏。

得到了(y(我们问题的解决方案:

  • 打开位于"src/com.company.yourapp/YourApp.java"下的 YourApp.java
  • 将以下代码放在 loadUrl(( 调用下方

视口设置 WebSettings 设置 = appView.getSettings((; settings.setUseWideViewPort(true(;
settings.setLoadWithOverviewMode(true(;

  • 打开索引.html并(重新(放置视区元标记
<meta name="viewport" content="target-densitydpi=medium-dpi, user-scalable=no, initial-scale=0.5, minimum-scale=0.5, width=device-width" />

最新更新