WebView Android Studio with HTML5

Question

WebView Android Studio with HTML5

Navigation

#1 by (3 votes)

1

How do you leave a 100% responsive layout in WebView? Do I have to configure in WebView or and my HTML that is not Responsive?

Code:

protectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);setContentView(R.layout.activity_main);WebViewmyWebView=(WebView)findViewById(R.id.webview);myWebView.loadUrl("file:///android_asset/index.html");
    myWebView.getSettings().setUseWideViewPort(true);
    myWebView.getSettings().setLoadWithOverviewMode(true);
    myWebView.getSettings().setSupportZoom(true);
    myWebView.getSettings().setBuiltInZoomControls(true);
    myWebView.getSettings().setDisplayZoomControls(false);

}

android html5 webview

asked by anonymous 17.08.2017 / 16:00

1 answer

Error in my view How to make a jQuery validator

score 3 · Accepted Answer

You have to configure directly in the html via style css, something like this:

<head>
<title>teu titulo da tua pagina</title>
<!-- ... -->
<!-- tem de ter isso no seu html -->
<meta name='viewport' content='width=device-width, initial-scale=1.0'
      charset='utf-8'>
<!-- faltou essa linha de código, foi maus... -->
<!-- -->
<link rel='stylesheet' href='bootstrap/css/bootstrap.min.css'>
<script src='bootstrap/js/jquery-1.12.3.min.js'></script>
<script src='bootstrap/js/bootstrap.min.js'></script>
<script src='bootstrap/js/jquery-scrolltofixed.js'></script>
<link href='bootstrap/css/bootstrap.min.css' rel='stylesheet'>
<style type="text/css">
/* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  //
  @media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
      width: 100%;
  }
  //
  * {
    margin: 0;
    padding:0;
  }
  /* reset de margens */
  /* para garantir que estes elementos ocuparão toda a tela */
  body, html {
    width: 100%;
    height: 100%;
    font-family: Arial, Tahoma, sans-serif;
  }
</style>
</head>

You should also load the bootstrap script's and styles, if that is what you are working with. you should also add this line to the webview:

myWebView.getSettings().setJavaScriptEnabled(true);

try ai, let me know if it worked.

[EDIT] - The commented line above is required.
As I specified in the comments, I look for the bootstrap settings directly in the root of my html, you can see that the links are to the 'src = bootstrap / ...' folder. I hope it works now