0

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

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

作为一个网络应用程序，边框非常适合使用 chrome 的 Nexus 4 的显示。但是当它是通过cordova安装的应用程序时，我必须将960px减少到570px左右才能适应它。我正在为那个#content div中的所有div做一个“固定”位置。只有 1 个目标设备可以使用此应用程序 - 我不关心任何其他设备。（是的，我真的很想这样做）。我不想滚动。

我尝试按照Phonegap/Cordova App Shrink too small 在高分辨率设备（如三星 Galaxy S4 和Phonegap 应用程序文本和布局太小）中的建议设置target-densitydpi=medium-dpi"

我试过像很多人建议的那样设置initial-scale=1.0 。我试过 1.5 和 2.0 让它变得更大，但 0.5 并没有让它更小。我尝试按照 PhoneGap 的建议将 首选项 name="EnableViewportScale" value="true" 添加到我的 config.xml : Scaling down a pages with viewport

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

    <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 的同一设备上会有不同的行为。

任何建议和/或指针将不胜感激。

4

1 回答 1

0

我在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

于 2014-12-31T02:51:00.997 回答