Android Webview - Webpage should fit the device screen

Question

I have tried the following to fit the webpage based on the device screen size   mWebview setInitialScale 30     and then set the metadata viewport   lt meta name  viewport  content  width 320  initial-scale 1 0  maximum-scale 1 0  user-scalable no    gt   lt meta name  viewport  content  width device-width  initial-scale 1 0  maximum-scale 1 0  minimum-scale 1 0  user-scalable 0    gt   lt meta name  viewport  content  width device-width  target-densityDpi medium-dpi   gt    But nothing works  webpage is not fixed to the device screen size   Can anyone tell me how to get this

User · Answer

I had video in html string  and width of web view was larger that screen width and this is working for me   Add these lines to HTML string     lt head gt   lt meta name  viewport  content  width device-width  gt   lt  head gt    Result after adding above code to HTML string    lt  DOCTYPE html gt   lt html gt    lt head gt   lt meta name  viewport  content  width device-width  gt   lt  head gt     lt  html gt

User · Answer

int PIC WIDTH  webView getRight  -webView getLeft

User · Answer

This seems like an XML problem  Open the XML document containing your Web-View  Delete the padding code at the top    Then in the layout   add  android layout width  fill parent  android layout height  fill parent    In the Web-View  add   android layout width  fill parent  android layout height  fill parent     This makes the Web-View fit the device screen

User · Answer

This will help in adjusting the emulator according to the webpage   WebView wb    CALL THIS METHOD wb setInitialScale 50     You can set the intial scale in percentage as shown above

User · Answer

WebView browser    WebView  findViewById R id webview   browser getSettings   setLoadWithOverviewMode true   browser getSettings   setUseWideViewPort true   browser getSettings   setMinimumFontSize 40     This works great for me since the text size has been set to really small by  setLoadWithOverViewMode and  setUseWideViewPort

User · Answer

Try with this HTML5 tips  http   www html5rocks com en mobile mobifying html  And with this  if your Android Version is 2 1 or greater    WebView getSettings   setLayoutAlgorithm LayoutAlgorithm SINGLE COLUMN

User · Answer

In theory the combination of   settings setLayoutAlgorithm LayoutAlgorithm NARROW COLUMNS      with   settings setUseWideViewPort false    fixes the problem  wrapping the content and fitting to the screen  But the NARROW COLUMNS has been deprecated  I advice you to read this thread below that explores the issue in detail  https   code google com p android issues detail id 62378

User · Answer

You have to calculate the scale that you need to use manually  rather than setting to 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        Then use  WebView web   new WebView this   web setPadding 0  0  0  0   web setInitialScale getScale

User · Answer

For reference  this is a Kotlin implementation of  danh32 s solution   private fun getWebviewScale  contentWidth   Int    Int       val dm   DisplayMetrics       windowManager defaultDisplay getRealMetrics dm      val pixWidth   dm widthPixels      return  pixWidth toFloat   contentWidth toFloat     100F                toInt       In my case  width was determined by three images to be 300 pix so   webview setInitialScale getWebviewScale 300     It took me hours to find this post   Thanks

User · Answer

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

User · Answer

All you need to do is simply  webView getSettings   setLayoutAlgorithm LayoutAlgorithm SINGLE COLUMN   webView getSettings   setLoadWithOverviewMode true   webView getSettings   setUseWideViewPort true

User · Answer

webview setInitialScale 1   webview getSettings   setLoadWithOverviewMode true   webview getSettings   setUseWideViewPort true   webview getSettings   setJavaScriptEnabled true     will work  but remember to remove something like    lt meta name  viewport  content  user-scalable no   gt    if existed in the html file or change user-scalable yes  otherwise it won t

User · Answer

Friends    I found a lot of import and great informations from you  But  the only way works for me was this way   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       I am working on Android 2 1 because of the kind of devices from the company  But I fixed my problem using the part of informations from each one   Thanks you

User · Answer

here s an updated version  not using deprecated methods  based upon  danh32 s answer   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            to be used alike   int initialScale   this getScale 420d   this mWebView setInitialScale initialScale

User · Answer

You have to use HTML in your webView in this case  I solved this using following code  webView loadDataWithBaseURL null                    lt  DOCTYPE html gt  lt html gt  lt body style     text-align center   gt  lt img src                                http   www koenvangorp be photos 2005 09 16-moon 2000 jpg                               alt   pageNo   width   100    gt  lt  body gt  lt  html gt                     text html    UTF-8   null

User · Answer

I have same problem when I use this code  webview setWebViewClient new WebViewClient         so may be you should remove it in your code And remember to add 3 modes below for your webview        webview getSettings   setJavaScriptEnabled true         webview getSettings   setLoadWithOverviewMode true       webview getSettings   setUseWideViewPort true     this fixes size based on screen size

User · Answer

These settings worked for me   wv setInitialScale 1   wv getSettings   setLoadWithOverviewMode true   wv getSettings   setUseWideViewPort true   wv getSettings   setJavaScriptEnabled true     setInitialScale 1  was missing in my attempts   Although documentation says that 0 will zoom all the way out if setUseWideViewPort is set to true but 0 did not work for me and I had to set 1

User · Answer

These work for me and fit the WebView to screen width      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       Thanks above advises and White line in eclipse Web view

User · Answer

Making Changes to the answer by danh32 since the  display getWidth    is now deprecated   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        Then use  WebView web   new WebView this   web setPadding 0  0  0  0   web setInitialScale getScale

User · Answer

The getWidth method of the Display object is deprecated  Override onSizeChanged to get the size of the WebView when it becomes available   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

User · Answer

You can use this      WebView browser    WebView  findViewById R id webview       browser getSettings   setLoadWithOverviewMode true       browser getSettings   setUseWideViewPort true     this fixes size based on screen size

[android] Android Webview - Webpage should fit the device screen

Examples related to android

Examples related to webview

Examples related to scaling

Examples related to android-webview