【问题标题】:Android Webview - Webpage should fit the device screenAndroid Webview - 网页应适合设备屏幕
【发布时间】:2011-04-24 09:34:51
【问题描述】:

我根据设备屏幕尺寸尝试了以下内容以适应网页。

mWebview.setInitialScale(30);

然后设置元数据视口

<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"/>
<meta name="viewport" content="width=device-width, target-densityDpi=medium-dpi"/>

但没有任何效果,网页未固定到设备屏幕尺寸。

谁能告诉我如何获得这个?

【问题讨论】:

    标签: android webview scaling android-webview


    【解决方案1】:

    您必须手动计算需要使用的比例,而不是设置为 30。

    private int getScale(){
        Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
        int width = display.getWidth(); 
        Double val = new Double(width)/new Double(PIC_WIDTH);
        val = val * 100d;
        return val.intValue();
    }
    

    然后使用

    WebView web = new WebView(this);
    web.setPadding(0, 0, 0, 0);
    web.setInitialScale(getScale());
    

    【讨论】:

    • 感谢您的回复,您说得对,它有效。但我有不同的问题。我不是在加载图片,而是在webview中加载网页,那么如何找出网页宽度(PIC_WIDTH)。
    • 啊,我错过了那里的那个常数。对于那个很抱歉。我不确定如何获得实际网页的宽度。
    • PIC_WIDTH 是我事先知道的常量,因为我只是显示资产文件夹中的单个图像。上面说了,不知道怎么获取实际网页的宽度。
    • @MaheshwarLigade 我使用 PIC_WIDTH = 360
    • @danh32 告诉 PIC_WIDTH 的值 ... 因为 360 对我来说不合适。
    【解决方案2】:
    int PIC_WIDTH= webView.getRight()-webView.getLeft();
    

    【讨论】:

    • getRight 和 getLeft 总是为我返回 0
    【解决方案3】:

    你可以用这个

        WebView browser = (WebView) findViewById(R.id.webview);
        browser.getSettings().setLoadWithOverviewMode(true);
        browser.getSettings().setUseWideViewPort(true);
    

    这会根据屏幕大小固定大小。

    【讨论】:

    • 这会占用屏幕,但不再允许您进行放大/缩小。这个问题可以改善吗?,我知道在IOS上是可以的。
    • 这个设置对我有用,但只适用于宽度,在同样的情况下,现在它正在切断高度
    • 这是迄今为止我发现的最佳解决方案。
    • 内置解决方案的事实真的让我很着迷。
    • 要添加缩放,添加以下内容: webview.getSettings().setBuiltInZoomControls(true); webview.getSettings().setDisplayZoomControls(false);
    【解决方案4】:

    这将有助于根据网页调整模拟器:

    WebView wb;
    //CALL THIS METHOD
    wb.setInitialScale(50);
    

    您可以如上所示以百分比设置初始比例。

    【讨论】:

      【解决方案5】:

      试试这个 HTML5 技巧

      http://www.html5rocks.com/en/mobile/mobifying.html

      如果您的 Android 版本为 2.1 或更高版本,则使用此功能

        WebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
      

      【讨论】:

      • 不幸的是,他们弃用了这个,这个解决方案在 Galaxy S5 上对我来说失败了
      【解决方案6】:

      朋友们,

      我从您那里找到了很多重要的信息和重要信息。但是,对我有用的唯一方法是这样:

      webView = (WebView) findViewById(R.id.noticiasWebView);
      webView.setInitialScale(1);
      webView.getSettings().setJavaScriptEnabled(true);
      webView.getSettings().setLoadWithOverviewMode(true);
      webView.getSettings().setUseWideViewPort(true);
      webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
      webView.setScrollbarFadingEnabled(false);
      webView.loadUrl("http://www.resource.com.br/");
      

      由于公司提供的设备类型,我正在开发 Android 2.1。但我使用每个人的部分信息解决了我的问题。

      谢谢!

      【讨论】:

      • 然后缩放不再起作用。只有我有这个问题?
      • @testing 你有解决办法吗?
      • @AnshulTyagi:不,我没有。因为这对我来说是一个测试项目,所以我没有进一步调查。如果你发现了什么,请告诉我!
      • @AnshulTyagi:对于网页this approach 正在为我工​​作。对于图像,我必须使用不同的东西......
      • 请将其更改为 Kotlin 的最新代码:val displayMetrics = DisplayMetrics() windowManager.defaultDisplay.getMetrics(displayMetrics) var width = displayMetrics.widthPixels var height = displayMetrics.heightPixels
      【解决方案7】:

      这些设置对我有用:

      wv.setInitialScale(1);
      wv.getSettings().setLoadWithOverviewMode(true);
      wv.getSettings().setUseWideViewPort(true);
      wv.getSettings().setJavaScriptEnabled(true);
      

      setInitialScale(1) 在我的尝试中丢失了。

      虽然文档说如果 setUseWideViewPort 设置为 true00 会一直缩小对我不起作用,我必须设置 1

      【讨论】:

      • 我没有设置初始比例,它为我工作了多年。 (我只是在设置概览模式和视口)。但是我刚刚遇到的一个新设备似乎开始放大,直到页面刷新。设置初始比例为我解决了这个问题。
      【解决方案8】:

      这些对我有用,并使 WebView 适合屏幕宽度:

      // get from xml, with all size set "fill_parent"  
      webView = (WebView) findViewById(R.id.webview_in_layout);  
      // fit the width of screen
      webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 
      // remove a weird white line on the right size
      webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);  
      

      感谢以上建议和White line in eclipse Web view

      【讨论】:

      【解决方案9】:

      在这种情况下,您必须在 webView 中使用 HTML。我使用以下代码解决了这个问题

      webView.loadDataWithBaseURL(null,
                      "<!DOCTYPE html><html><body style = \"text-align:center\"><img src= "
                              + \"http://www.koenvangorp.be/photos/2005_09_16-moon_2000.jpg\"
                              + " alt=\"pageNo\" width=\"100%\"></body></html>",
                      "text/html", "UTF-8", null);
      

      【讨论】:

      • 我猜最好使用 px ot vh 而不是 %。 iframe 中的 % 在方向更改方面存在一些错误
      【解决方案10】:

      不推荐使用 Display 对象的 getWidth 方法。覆盖 onSizeChanged 以获取 WebView 可用时的大小。

      WebView webView = new WebView(context) {
      
          @Override
          protected void onSizeChanged(int w, int h, int ow, int oh) {
      
              // if width is zero, this method will be called again
              if (w != 0) {
      
                  Double scale = Double.valueOf(w) / Double.valueOf(WEB_PAGE_WIDTH);
      
                  scale *= 100d;
      
                  setInitialScale(scale.intValue());
              }
      
              super.onSizeChanged(w, h, ow, oh);
          }
      };
      

      【讨论】:

      • 你是怎么得到WEB_PAGE_WIDTH的?
      • 如果您尝试缩放一些固定宽度的内容以适应屏幕,那么您应该提前知道您的内容的宽度。这有意义吗?
      • 好的,这应该适用于图像。但是对于网页(可以是响应式的),它可以是任何宽度 > 320 像素。
      【解决方案11】:
      webview.setInitialScale(1);
      webview.getSettings().setLoadWithOverviewMode(true);
      webview.getSettings().setUseWideViewPort(true);
      webview.getSettings().setJavaScriptEnabled(true);
      

      会起作用,但请记住删除以下内容:

      <meta name="viewport" content="user-scalable=no"/>
      

      如果在html文件中存在或者更改user-scalable=yes,否则不会。

      【讨论】:

        【解决方案12】:
        WebView browser = (WebView) findViewById(R.id.webview);
        browser.getSettings().setLoadWithOverviewMode(true);
        browser.getSettings().setUseWideViewPort(true);
        browser.getSettings().setMinimumFontSize(40);
        

        这对我来说非常有用,因为 .setLoadWithOverViewMode 和 .setUseWideViewPort 将文本大小设置为非常小。

        【讨论】:

          【解决方案13】:

          理论上的组合:

          settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS); 
          

          settings.setUseWideViewPort(false)
          

          解决了问题,包装了内容并适合屏幕。但是 NARROW_COLUMNS 已被弃用。我建议您阅读下面详细探讨该问题的帖子:https://code.google.com/p/android/issues/detail?id=62378

          【讨论】:

            【解决方案14】:

            你需要做的只是

            webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
            webView.getSettings().setLoadWithOverviewMode(true);
            webView.getSettings().setUseWideViewPort(true);
            

            【讨论】:

            • 它在没有 setLayoutAlgorithm 的情况下也适用于我
            【解决方案15】:

            从 display.getWidth(); 开始更改 danh32 的答案;现已弃用。

            private int getScale(){
                Point p = new Point();
                Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
                display.getSize(p);
                int width = p.x; 
                Double val = new Double(width)/new Double(PIC_WIDTH);
                val = val * 100d;
                return val.intValue();
            }
            

            然后使用

            WebView web = new WebView(this);
            web.setPadding(0, 0, 0, 0);
            web.setInitialScale(getScale());
            

            【讨论】:

            • 我计算出比例应该
            【解决方案16】:

            我在使用这段代码时遇到了同样的问题

            webview.setWebViewClient(new WebViewClient() {
            }
            

            您可能应该在您的代码中删除
            并记得在下面为您的 webview 添加 3 种模式

                webview.getSettings().setJavaScriptEnabled(true);  
                webview.getSettings().setLoadWithOverviewMode(true);
                webview.getSettings().setUseWideViewPort(true);
            

            这会根据屏幕尺寸固定尺寸

            【讨论】:

            • @shahzainali 你可以缩放你的网页视图吗?
            • @AnshulTyagi 不,它不会缩放。
            【解决方案17】:

            这似乎是一个 XML 问题。打开包含 Web 视图的 XML 文档。删除顶部的填充代码。

            然后在布局中,添加

            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            

            在 Web 视图中,添加

            android:layout_width="fill_parent"
            android:layout_height="fill_parent" 
            

            这使得 Web 视图适合设备屏幕。

            【讨论】:

            • 这样可以节省我的时间。
            • fill_parent 已过时,请使用 match_parent。
            【解决方案18】:
            WebView webView = (WebView)findViewById(R.id.web_view);
            webView.setInitialScale((int) getResources().getDimension(R.dimen._50sdp)); // getActivity(). if you are at Fragment
            webView.getSettings().setLoadsImagesAutomatically(true);
            webView.getSettings().setJavaScriptEnabled(true);
            webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
            webView.loadDataWithBaseURL(null,here comes html content,"text/html","UTF-8", null);
            webView.getSettings().setBuiltInZoomControls(true);
            webView.getSettings().setSupportZoom(true);
            webView.getSettings().setDisplayZoomControls(true);
            webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
            

            【讨论】:

            • 请不要因为投反对票而发布两个内容相同的答案。
            • 请花点功夫格式化你的代码!为什么要向右缩进这么多?删除一些空白的时间太长?
            【解决方案19】:

            我有 html 字符串中的视频,网络视图的宽度大于屏幕宽度,这对我有用。

            将这些行添加到 HTML 字符串。

            <head>
            <meta name="viewport" content="width=device-width">
            </head>
            

            将上述代码添加到 HTML 字符串后的结果:

            <!DOCTYPE html>
            <html>
            
            <head>
            <meta name="viewport" content="width=device-width">
            </head>
            
            
            </html>
            

            【讨论】:

              【解决方案20】:

              根据@danh32 的回答,这是一个更新版本,没有使用过时的方法:

              protected int getScale(Double contentWidth) {
                  if(this.getActivity() != null) {
                      DisplayMetrics displaymetrics = new DisplayMetrics();
                      this.getActivity().getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
                      Double val = displaymetrics.widthPixels / contentWidth * 100d;
                      return val.intValue();
                  } else {
                      return 100;
                  }
              }
              

              同用:

              int initialScale = this.getScale(420d);
              this.mWebView.setInitialScale(initialScale);
              

              【讨论】:

                【解决方案21】:

                作为参考,这是@danh32 解决方案的 Kotlin 实现:

                private fun getWebviewScale (contentWidth : Int) : Int {
                    val dm = DisplayMetrics()
                    windowManager.defaultDisplay.getRealMetrics(dm)
                    val pixWidth = dm.widthPixels;
                    return (pixWidth.toFloat()/contentWidth.toFloat() * 100F)
                             .toInt()
                }
                

                在我的例子中,宽度由三个图像确定为 300 像素,所以:

                webview.setInitialScale(getWebviewScale(300))
                

                我花了几个小时才找到这篇文章。谢谢!

                【讨论】:

                  【解决方案22】:

                  对于任何来到这里并面临处理 Webview 初始缩放/缩放问题的开发人员(尤其是在自定义网页中)。

                     webView.getSettings().setJavaScriptEnabled(true);
                          webView.getSettings().setUseWideViewPort(false); //make sure this method is false so setInitialScale() can work correctly
                          webView.getSettings().setLoadWithOverviewMode(true);
                          webView.setInitialScale(110);
                  

                  【讨论】:

                    猜你喜欢
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 2018-03-28
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 2016-10-28
                    相关资源
                    最近更新 更多