Android WebView 设置缩放以及自适应

根据我们一般的习惯打开网页对于看不清楚的地方,我们喜欢双指来缩放网页

WebView 则需要我们自己手动来设置这个是否支持缩放

WebSettings settings = wView.getSettings();
settings.setUseWideViewPort(true);//设定支持 viewport
settings.setLoadWithOverviewMode(true);   //自适应屏幕
settings.setBuiltInZoomControls(true);
settings.setDisplayZoomControls(false);
settings.setSupportZoom(true);//设定支持缩放

范例

  1. 创建一个 空的 Android 项目 cn.twle.android.WebViewScale

  2. 修改 AndroidManifest.xml 添加网络权限

    <uses-permission android:name="android.permission.INTERNET" />
    
  3. 修改 activity_main.xml 添加一个 WebView

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:padding="5dp"
        android:layout_width="match_parent"    
        android:layout_height="match_parent">
        <WebView
            android:id="@+id/ms_webview"
            android:layout_width="match_parent" 
            android:layout_height="match_parent" />
    </RelativeLayout>
    
  4. 修改 MainActivity.java

    package cn.twle.android.webviewscale;
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.webkit.WebSettings;
    import android.webkit.WebView;
    
    public class MainActivity extends AppCompatActivity {
    
        private WebView ms_webview;
    
        private static final String SITE_URL = "https://www.twle.cn/";
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            ms_webview = (WebView) findViewById(R.id.ms_webview);
    
            WebSettings webSettings = ms_webview.getSettings();
            webSettings.setJavaScriptEnabled(true);
            webSettings.setDefaultTextEncodingName("UTF-8");
            webSettings.setUseWideViewPort(true);//设定支持 viewport
            webSettings.setLoadWithOverviewMode(true);   //自适应屏幕
            webSettings.setBuiltInZoomControls(true);
            webSettings.setSupportZoom(true);//设定支持缩放
    
            ms_webview.loadUrl(SITE_URL);
        }
    }
    

运行效果如下

当我们缩放时,出现了一个恶心的问题,就是很常见的缩放控件,我们肯定是不想要的啦, 那么加上下面句代码就可以把缩放控件给隐藏掉了!

settings.setDisplayZoomControls(false);

也可以自行设置初始的缩放比例

ms_webview.setInitialScale(25);// 为 25%,最小缩放等级

上面是整个网页都缩放的,有时我们仅仅需要对字体进行缩放

settings.setTextZoom(int)

也可以直接通过下面的语句设置大小

settings.setTextSize(TextSize.LARGER)

Android自带五个可选字体大小的值

  1. SMALLEST(50%)
  2. SMALLER(75%)
  3. NORMAL(100%)
  4. LARGER(150%)
  5. LARGEST(200%)

参考文档

  1. 官方文档: WebView

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.