使html页面文本适合窗口宽度

Question

您好，我的网站是专为移动设备设计的。

我在我的应用程序中使用WebView来显示这个网站。

当用户缩放文本时，我会得到水平滚动条。相反，我想要的是，页面中的文本应该换行到下一行，文本应该适合屏幕宽度。

应该使用什么html5，css3属性来包装文本以适应移动设备的屏幕？

Answer 1

在苹果网站上说

  

用户还可以使用手势放大和缩小。放大时和   out，用户更改视口的比例，而不是视图的大小   视。因此，平移和缩放不会更改布局   的网页。图3-8显示了用户缩放时的同一网页   在看详情。

所以我认为这不可能，除非你可以操纵比例

Answer 2

在您的代码中，您需要实现WebViewClient并覆盖OnScaleChanged方法，该方法会通知您用户放大了。在此方法中，您需要重新布局整个WebView。以下代码是我如何实现文本重排（注意：如果您不希望滚动条显示您将需要更多代码，但我没有添加它）：

WebView view;
view = (WebView)findViewById(R.id.webView);
view.setWebViewClient(new WebViewClient(){
    @Override
    public void onScaleChanged(WebView view, float oldScale, float newScale) {

        view.getSettings().setLayoutAlgorithm(
                LayoutAlgorithm.NARROW_COLUMNS); //causes the text to reflow to the screen size
        view.invalidate();
        super.onScaleChanged(view, oldScale, newScale);
    }
});