Android——PhoneGap/WebView 忽略视口元标记？

Posted 2023-05-07

【中文标题】Android——PhoneGap/WebView 忽略视口元标记？

【英文标题】：Android-- PhoneGap/WebView ignores viewport meta tags?

【发布时间】：2011-06-22 11:10:21

【问题描述】：

我有一个网页，我正尝试使用 PhoneGap（它使用设置为“appview”的普通 WebView）在我的 android 设备上显示（从项目的资产目录加载），但 webview 完全忽略了以下：

<meta name = "viewport" content = "user-scalable=no,width=device-width" />

无论我在这一行中设置什么（我已经尝试显式设置缩放、以像素为单位设置宽度/高度等），设备完全忽略它并将网站呈现为非常小并锚定在左上角- 屏幕的手角。我可以使用捏合手势放大（即使我在上面的 html 代码中明确禁用放大），但我希望页面被放大以正确适应加载的设备。

这是有趣的一点...如果我将完全相同的网站放在我的网络服务器上并使用我的测试设备上的默认浏览器导航到它，页面会正确加载（缩放到适合设备的大小）。

请帮忙。

谢谢。

EDIT1：

我目前的设置是：

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

这也完全被忽略了。

EDIT2：

这里有一些有趣的东西......

<meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, user-scalable=no" />

上面的行在模拟器中将页面缩放到 2 倍，但在我的设备上没有任何改变（运行 2.2.1 的三星 Epic）。尽管如此，即使是 2 倍，页面也没有被缩放到模拟器的宽度……我必须将其设置为“initial-scale=2.5”之类的东西。

【问题讨论】：

添加 initial-scale=1 有什么改变吗？

嗨。我当前的设置是： ...这没有任何作用。它完全被忽略了。谢谢

你可能想在这里查看我的so post：goo.gl/P1nK3，这也指向了我提交的一个缺陷。可能不是它们被忽略，而是这些值相互冲突并被删除。我对参数的各种排列有很多结果。你可能会发现一些有用的东西。 :)

【参考方案1】：

尝试在扩展 DroidGap 的 Java 类的 onCreate() 方法中添加以下两行代码。

this.appView.getSettings().setUseWideViewPort(true);
this.appView.getSettings().setLoadWithOverviewMode(true);

如果您的视口标签现在开始工作，请告诉我。

【讨论】：

就是这样（以及 Ivan 的回答）——这需要数百万的投票。虽然，对我来说，需要更新的是 public class MyApp extends CordovaActivity 方法，而不是 DroidGap。也许您可以更新您的答案，因为它仍然相关！

对不起，我是新手。我必须在哪里添加此代码，我必须做什么才能使我的视口工作？我有一个 cordova 3.6 项目，但我的视口不起作用。所以...我找到了这个解决方案，听起来不错，但是...是的，我不知道在哪里实现代码。 :-/

很好的答案，但 API 发生了一些变化。现在是：((SystemWebView) appView.getEngine().getView()).getSettings().xxx

【参考方案2】：

我试过了

this.appView.getSettings().setUseWideViewPort(true);
this.appView.getSettings().setLoadWithOverviewMode(true);

未启用缩放。

使用以下设置，启用缩放

this.appView.getStrings().setSupportZoom(true);

但它没有被视口标签正确控制，即使在视口标签中设置了 minimum-scale=1 和 maximum-scale=1，所有页​​面现在都可以缩放。

现在页面导航出错了，点击页面上的按钮，android后退按钮无法正常工作。

【讨论】：

错误：this.appView.getSettings().setSupportZoom(true);

【参考方案3】：

这里有很好的答案，但 Cordova API 似乎发生了一些变化。

在OnCreate 方法中（在loadUrl 之后或在您显式调用init 之后）：

    CordovaWebViewEngine engine = appView.getEngine();
    SystemWebView webView = (SystemWebView)engine.getView();
    WebSettings settings = webView.getSettings();
    settings.setUseWideViewPort(true);
    settings.setLoadWithOverviewMode(true);

【参考方案4】：

如果您希望 android 将您的内容缩放到固定宽度（例如 1024），请使用：

<meta name="viewport" id="viewport" content="width=1024">
<script type="text/javascript">
    var viewPortWidth = 1024;
    function setViewport() 
    if ((navigator.userAgent.toLowerCase().indexOf("android")!=-1)) 
        var wW0 = window.screen.width;
        var scale = wW0/viewPortWidth;
        var vPort = ", maximum-scale="+scale+", minimum-scale="+scale+", initial-scale="+scale+", user-scalable=yes";
        document.getElementById("viewport").setAttribute("content", vPort);
    
    
    setViewport();
</script>

另外，您应该为 onorientationchange 添加事件监听器以调用 setViewport 函数。

【讨论】：

我对此抱有希望，但它不起作用。我的页面是 760 像素，屏幕是 1080 像素，它的比例约为 0.465。 760/1080 约为 0.704。

我认为这里的诀窍是，你不仅要给出width 属性，它应该可以工作，但显然没有，而且还有最小比例，最大-scale 属性，这可能会起作用。

【参考方案5】：

我在带 phonegap 的 iPhone 上使用它

<meta name="description" content="trevorrudolph.com">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="apple-touch-icon" href="http://trevorrudolph.com/wordpress/apple-touch-icon.png">

【讨论】：

我相信这个问题是特定于 android 的，而不是 iPhone。

我很久以前就写了这篇文章，然后我才明白