Question

我创建了一个网络应用程序，目标是Nexus 4手机，旨在用于横向。使用铬看起来很好。但是当我使用HTML / CSS创建Cordova应用程序时，显示对于手机来说太大了。我尝试了许多人建议的许多事情无济于事。例如，如果我定义了以下div：

#content {
    border:             thin ;
    border-style:       solid ;
    width:              960px ;
    height:             475px ;
}

作为网络应用程序，边框非常适合使用Chrome的Nexus 4显示屏。但是当我通过cordova安装App时，我必须将960px降低到大约570px以使其适合。我正在修复＆＃39; #content div中我所有div的位置。此应用程序将只使用1个目标设备 - 我不关心任何其他设备。（是的，我真的想这样做）。我不想滚动。

我尝试按Phonegap/Cordova App Shrink too small on high resolution device like Samsung Galaxy S4中的建议设置 target-densitydpi = medium-dpi＆＃34; 和Phonegap Application text and layout too small

我尝试像许多人建议的那样设置 initial-scale = 1.0 。我尝试过1.5和2.0，这使它更大，但0.5不会让它变小。我尝试添加 首选项名称=＆＃34; EnableViewportScale＆＃34;值=＆＃34;真＆＃34; 根据{{3}}

的建议到我的config.xml

虽然我尝试了很多组合，但我的基本视口定义是：

    <meta name="viewport" content="user-scalable=no,
        initial-scale=1, maximum-scale=1, minimum-scale=1,
        width=device-width, height=device-height,
        target-densitydpi=medium-dpi" />

没有什么对我有用。

我不知道这些东西是如何工作的，我对前端和移动应用技术的经验很少。我看到广告中的硬件设备分辨率与我在网络应用上看到的内容之间没有关系，以及我在本机应用上看到的内容。我不知道为什么他们在使用相同CSS的同一台设备上表现不同。

非常感谢任何建议和/或指示。

Answer 1

我在Android 4.1 viewport scaling ( setInitialScale, meta initial-scale not working)找到了一个解决方案（虽然有一个缺少开口的花括号）。

使用：

function customScaleThisScreen() {
    var contentWidth = document.body.scrollWidth, 
        windowWidth = window.innerWidth, 
        newScale = windowWidth / contentWidth;
    document.body.style.zoom = newScale;
}

并将我的视口设置为：

    <meta name="viewport" content="user-scalable=no,
        initial-scale=0.6, maximum-scale=0.6, minimum-scale=0.6,
        width=device-width, height=device-height,
        target-densitydpi=medium-dpi" />

它现在适合我的Nexus 4屏幕。虽然高度（在横向模式下）略微超出了我理想的范围，但显示了整个显示。它占用了我可以忍受的高度的90％左右。

我还发现了设置：

<preference name="EnablEnableViewportScale" value="false" />

config.xml中的

什么都不做 - 无论我将其设置为true还是false。之前，无论EnableViewportScale设置为什么，我都能够向上扩展1.0（例如2和4），但不能低于1.0。但上面的代码解决了这个问题。我正在运行Android 4.4.4

想收缩cordova App显示输出

1 个答案: