在 Android Webview 中使用元视口宽度

Posted

技术标签:

【中文标题】在 Android Webview 中使用元视口宽度【英文标题】:Use meta viewport width in Android Webview 【发布时间】:2014-02-22 23:59:45 【问题描述】:

我想使用 viewport 标签将 html 内容放入 WebView。

<meta name='viewport' content='width=640'/>

这似乎在 Chrome 浏览器中运行良好,但无法缩放以适应 WebView。我做了一个简化的测试活动:

public class MyActivity extends Activity 

    @Override
    public void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);

        //--------------------------------------------------
        // Create a simple html page including viewport tag.
        //--------------------------------------------------

        String html = "<!DOCTYPE html>" +
                "<html>" +
                "<head>" +
                "<meta name='viewport' content='width=640'/>" +
                "<title>Viewport Test</title>" +
                "</head>" +
                "<body style=\"margin: 0px;\">" +
                "<div style=\"width: 600px; height: 600px; border: 20px solid green; background-color: red;\"></div>" +
                "</body>" +
                "</html>";

        //-----------------------------------
        // Place html in WebView.
        //-----------------------------------

        WebView webView = new WebView(this);

        webView.loadData(html, "text/html", "utf-8");

        setContentView(webView);

        //-----------------------------------
        // Launch Chrome with the same html.
        //-----------------------------------

        Intent intent = new Intent(Intent.ACTION_VIEW);

        intent.setComponent(ComponentName.unflattenFromString("com.android.chrome/com.android.chrome.Main"));

        intent.setData(Uri.parse("data:text/html;charset=utf-8;base64," + Base64.encodeToString(html.getBytes(), Base64.NO_WRAP)));

        startActivity(intent);
    

谁能解释原因,或提出解决办法?

【问题讨论】:

【参考方案1】:

好的,你必须使用:

    WebSettings settings = webView.getSettings();
    settings.setLoadWithOverviewMode(true);
    settings.setUseWideViewPort(true);

但是,如果您像这样设置 user-scalable=0,它也会中断:

    <meta name='viewport' content='width=640, user-scalable=0'/>

【讨论】:

由于某种原因,这似乎不适用于棉花糖......有什么想法吗?

以上是关于在 Android Webview 中使用元视口宽度的主要内容,如果未能解决你的问题,请参考以下文章

理解 Android 元视口缩放:我错过了啥?

Android WebView 似乎忽略了网页上的“视口”信息

使用视口元标记实现最小宽度

Android WebView 视口

视口元标记在 Android 上无法按预期工作

Android Webview - 网页应适合设备屏幕