Android webview 像素答案

【问题标题】：Android webview pixelsAndroid webview 像素
【发布时间】：2018-06-11 22:52:00
【问题描述】：

我有一个带有 webview 的 android 应用程序。问题是：如果我在 html 代码中放置一个 div (width:400px) webview 正在缩放它。我在“java”获得屏幕宽度，我想在 JS 代码中设置所有宽度、高度、字体大小。所以让JS中的一个像素在webview屏幕上也有一个像素。

我尝试使用我的测试设备（800 像素 x 480 像素）执行以下代码，但 400 像素宽度的 div 不在屏幕的左半部分。（屏幕宽度约为 600px）

活动代码：

    myWebView=new WebView(this);
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.getSettings().setUseWideViewPort(true);
try {
 myWebView.getSettings().setLoadWithOverviewMode(true);
 myWebView.getSettings().setBuiltInZoomControls(true);
 if (android.os.Build.VERSION.SDK_INT >= 11) {
 myWebView.getSettings().setDisplayZoomControls(false);
 }
 myWebView.setInitialScale(1);
 myWebView.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
 myWebView.requestFocus(View.FOCUS_DOWN);
 myWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
} catch (Exception e) {
 // doesn't matter
}

index.html 代码：

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title></title>
</head>
<body id="body" style="background: #000000;">
<div style="display:block;width:400px;height:240px;position:absolute;border:1px solid #ff0000;background:#ffff00;z-index:10000000"></div>
</body>
</html>

【问题讨论】：

标签： javascript java android css webview

【解决方案1】：

Android 使用密度像素 (dp) 而不是像素 (px)。在 HTML 代码中使用 % 的宽度

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
  </head>
  <body id="body" style="background: #000000;">
    <div style="display:block;width:40%;height:240px;position:absolute;border:1px solid #ff0000;background:#ffff00;z-index:10000000"></div>
  </body>
</html>

我认为它有效。

【讨论】：

我必须以像素为单位指定尺寸以使用户界面准确。
那么你必须让它响应最好，以便使用 Bootstrap 在 web 视图中显示。

【解决方案2】：

此回复可能为时已晚，抱歉。您应该做的（如果您不能依赖 %）是从加载时的 WebView（javascript）报告 Android 类的实际尺寸（您需要首先为此设置一个界面），然后将您的尺寸缩放到真实的 WebView 尺寸：

在 Android 活动（或任何其他类）上：

public class MainActivity extends AppCompatActivity {

    // Set the dimensions from the webView page
    @JavascriptInterface
    public void showToast(int width, int height) {
        Toast.makeText(this, "" + width + "x" + height, Toast.LENGTH_SHORT).show();
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            WebView webView = findViewById(R.id.main_web_view);
            WebSettings webSettings = webView.getSettings();
            webSettings.setJavaScriptEnabled(true);
            webView.addJavascriptInterface(this, "Android");
    }

}

在 WebView javascript 上：

window.onload = function() {
    if (typeof Android !== "undefined" && Android !== null) {
        Android.showToast(window.innerWidth, window.innerHeight);
    } else {
        alert("Not viewing in webview");
    }
};

在我的项目中，我并没有最终使用这种方法，因为我意识到我可以在 Javascript 中进行重新缩放，检测窗口加载时 WebView (javascript) 中的实际宽度和高度，然后在那里调整大小而无需将其报告给活动 (java)。

【讨论】：