android 响应式网站的网页视图超过全宽

Question

我有一个简单的网络视图：

<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    />

这样调用的：

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView myWebView = (WebView) findViewById(R.id.webview);
        myWebView.loadUrl("http://example.com");
    }

问题是我尝试呈现的网站没有进入响应模式。宽度超出屏幕导致我滚动。

我试过的宽度包括：fill_parent、match_parent、wrap_content 和 none，它们都有效。

我怎样做才能使网页呈现响应式，在不水平滚动的情况下停留在屏幕范围内？

Answer 1

您缺少几个使 WebView 呈现得更像移动浏览器的设置调用：

myWebView.getSettings().setUseWideViewPort(true);
myWebView.getSettings().setLoadWithOverviewMode(true);

您还可以选择启用双指缩放：

myWebView.getSettings().setSupportZoom(true);
myWebView.getSettings().setBuiltInZoomControls(true);
myWebView.getSettings().setDisplayZoomControls(false);

正如@Hylianpuffball 正确指出的那样，您的网站最好使用 <viewport> 标签来控制其展示。

Answer 2

我找到了使用 setScale 正确呈现 webview 的最多方法：

webView.setInitialScale((int) (getScale());

getScale 方法使用此算法计算屏幕尺寸：

metrics.density*10

然后你可以用比例因子除以一个小于1.5的值来微调

Answer 3

错误显示在

行

webView.setInitialScale((int) (getScale());

android 响应式网站的网页视图超过全宽

android webview goes more than full width for responsive sites

android

css

webview