Android 4.1 视口(viewport)缩放(setInitialScale,meta initial-scale 不工作)

标签 android cordova webview viewport

SO 和互联网的其他部分有数百篇关于尝试修复 Android 中的视口(viewport)缩放的帖子,我现在相当确定你不能在 Android 4.1 的 webview 中设置初始比例。

我正在构建一个 Cordova (Phonegap) 应用程序,我已经在 iPhone 3GS、4S 和 5 以及 iPad 2 上很好地缩放了所有东西,在 iOS6 上运行 iOS7 和 3GS

我还调整了 UI 以适应 Moto G、LG Nexus 5、Google Nexus 5 和三星 Galaxy S4,它们都运行 Android 4.4

但是在运行 Android 4.1 的三星 Galaxy S2 和 S3 Mini 上,我无法设置初始比例。

HTML 视口(viewport)元标记在 4.1 或 4.4 上不起作用(在 Chrome 中有效,在 WebView 或默认浏览器中无效):

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

我已经从 cli 中创建了一个绝对基本的 Cordova 项目,cordova create basicProject,如果我在主 Activity 的 onCreate 方法中添加一些 Java,特别是 setInitialScale 方法:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.init();
    // Set by <content src="index.html" /> in config.xml
    super.loadUrl(Config.getStartUrl());
    //super.loadUrl("file:///android_asset/www/index.html");

    this.appView.setInitialScale( 50  );

}

然后我按预期获得了 4.4 缩放比例的 Moto G:

Moto G on Android 4.4 with an initial-scale of 0.5, via setInitialScale(50)

但在 Galaxy S2 上运行的完全相同的项目不会缩放。

Galaxy S2 on Android 4.1 with an initial-scale of 0.5, via setInitialScale(50)

我仅限于在 4.1 的三星设备或 4.4 的一系列设备上进行测试,因此如果有人可以在 4.2 或 4.3 上测试相同的东西,或者 4.1 上的任何人而不是三星,那将会很有帮助。

有谁知道如何让 Android 4.1 服从 setInitialScale()

最佳答案

您应该能够向您的网页添加一些 javascript,以便在您的 webview 拾取时缩放内容。下面是一个示例,它将缩放您的 html 内容,以便内容适合屏幕的可用宽度:

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

这将适用于较旧的(4.2 之前)和较新的基于 chromium 的 (4.2+) webviews。

关于Android 4.1 视口(viewport)缩放(setInitialScale,meta initial-scale 不工作),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24636515/

相关文章:

android - 在android中的recyclerview中添加预加载 View

android - Android 中的按需权限

java - 如何在 Android Studio IDE 中找到我项目中所有未使用的方法?

android - jQuery mobile + phonegap +android 4.0.4 标题闪烁

android - 在 webview 中获取当前 URL

javascript - 如何清除 react native webview cookies?

java - 当我按下激活 fragment 中的异步任务的按钮时,应用程序停止工作

java - Android格式化日历输出时间

android - 谷歌地图没有出现在 Phonegap Build 中

ios - IOS上的Cordova相机使用.MOV而不是.MP4返回file_uri