General information:

  • there is a site without mobile layout, it is designed for online reporting and therefore it would be much more convenient to have an adjustment to the width of the screen;
  • the developed "application" has one activity for which the navigation drawer calls webview fragments, each fragment represents a specific section of the site;
  • since the page loading is used in the overviewMode, some pages adapt to the size themselves, but there are pages (for example, with tables) that do not fit in width;
  • I use javasript to modify the pages and have not found a better solution yet (moska is not enough) ...

Now, the essence of the question:

  1. As I write on java and javasript, I decided to dynamically change the content of the page, is it possible to insert the <meta name="viewport" content="width=device-width, user-scalable=yes"> tag into <head> <meta name="viewport" content="width=device-width, user-scalable=yes"> before how will <body> start loading?
  2. Is it possible through the webView itself (without using js and webView.setInitialScale) to fit the content under the screen?
  3. How can I wrap all this in asincTask or something similar, so that page loading and scripts load in background-e ?? (stupidly making the webview invisible and then again visible does not help, anyway the page itself appears for a split second, and then the scripts are loaded);
  4. And, finally ... maybe I'm doing everything wrong and it could be easier? Any ideas?

MainActivity.java

 package com.ordo_ereticus.ttk_agent2; import android.annotation.TargetApi; import android.content.res.Configuration; import android.os.Build; import android.os.Bundle; import android.support.v4.app.ActionBarDrawerToggle; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBarActivity; import android.util.Log; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.webkit.WebView; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.ListView; import fragments.FourthScreen; import fragments.ScreenEight; import fragments.ScreenFive; import fragments.ScreenNine; import fragments.ScreenOne; import fragments.ScreenSeven; import fragments.ScreenSix; import fragments.ScreenTen; import fragments.ScreenThree; import fragments.ScreenTwo; public class MainActivity extends ActionBarActivity { private String[] mScreenTitles; private DrawerLayout mDrawerLayout; private ListView mDrawerList; private ActionBarDrawerToggle mDrawerToggle; private CharSequence mDrawerTitle; private CharSequence mTitle; @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH) @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mTitle = mDrawerTitle = getTitle(); mScreenTitles = getResources().getStringArray(R.array.screen_array); mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); mDrawerList = (ListView) findViewById(R.id.left_drawer); mDrawerList.setAdapter(new ArrayAdapter<>(this, R.layout.drawer_list_item, mScreenTitles)); mDrawerList.setOnItemClickListener(new DrawerItemClickListener()); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setHomeButtonEnabled(true); mDrawerToggle = new ActionBarDrawerToggle( this, /* host Activity */ mDrawerLayout, /* DrawerLayout object */ R.drawable.ttk, /* nav drawer icon to replace 'Up' caret */ R.string.drawer_open, /* "open drawer" description */ R.string.drawer_close /* "close drawer" description */ ) { public void onDrawerClosed(View view) { getSupportActionBar().setTitle(mTitle); supportInvalidateOptionsMenu(); // creates call to onPrepareOptionsMenu() } /** Called when a drawer has settled in a completely open state. */ public void onDrawerOpened(View drawerView) { getSupportActionBar().setTitle(mDrawerTitle); supportInvalidateOptionsMenu(); // creates call to onPrepareOptionsMenu() } }; // Set the drawer toggle as the DrawerListener mDrawerLayout.setDrawerListener(mDrawerToggle); // Initialize the first fragment when the application first loads. if (savedInstanceState == null) { selectItem(0); }else {onRestoreInstanceState(savedInstanceState);} } @Override public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); if (mDrawerToggle != null) mDrawerToggle.onConfigurationChanged(newConfig); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; return super.onCreateOptionsMenu(menu); } /* Called whenever we call invalidateOptionsMenu() */ @Override public boolean onPrepareOptionsMenu(Menu menu) { // If the nav drawer is open, hide action items related to the content view boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList); return super.onPrepareOptionsMenu(menu); } @Override public boolean onOptionsItemSelected(MenuItem item) { // The action bar home/up action should open or close the drawer. // ActionBarDrawerToggle will take care of this. return mDrawerToggle.onOptionsItemSelected(item) || super.onOptionsItemSelected(item); } /* The click listener for ListView in the navigation drawer */ private class DrawerItemClickListener implements ListView.OnItemClickListener { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { selectItem(position); } } /** Swaps fragments in the main content view */ private void selectItem(int position) { // Update the main content by replacing fragments android.support.v4.app.Fragment fragment = null; switch (position) { case 0: fragment = new ScreenOne(); break; case 1: fragment = new ScreenTwo(); break; case 2: fragment = new ScreenThree(); break; case 3: fragment = new FourthScreen(); break; case 4: fragment = new ScreenFive(); break; case 5: fragment = new ScreenSix(); break; case 6: fragment = new ScreenSeven(); break; case 7: fragment = new ScreenEight(); break; case 8: fragment = new ScreenNine(); break; case 9: fragment = new ScreenTen(); break; case 10: fragment = new ScreenOne(); break; default: break; } // Insert the fragment by replacing any existing fragment if (fragment != null) { android.support.v4.app.FragmentManager fragmentManager = getSupportFragmentManager(); fragmentManager.beginTransaction() .replace(R.id.content_frame, fragment).commit(); // Highlight the selected item, update the title, and close the drawer mDrawerList.setItemChecked(position, true); setTitle(mScreenTitles[position]); mDrawerLayout.closeDrawer(mDrawerList); } else { // Error Log.e(this.getClass().getName(), "Error. Fragment is not created"); } } @Override public void setTitle(CharSequence title) { mTitle = title; getSupportActionBar().setTitle(mTitle); } /** * When using the ActionBarDrawerToggle, you must call it during * onPostCreate() and onConfigurationChanged()... */ @Override protected void onPostCreate(Bundle savedInstanceState) { super.onPostCreate(savedInstanceState); // Sync the toggle state after onRestoreInstanceState has occurred. mDrawerToggle.syncState(); } }

One of the fragments:

 package fragments; import android.graphics.Bitmap; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.Menu; import android.view.MenuInflater; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import android.webkit.JsResult; import android.webkit.WebChromeClient; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.ProgressBar; import com.ordo_ereticus.ttk_agent2.R; public class ScreenFive extends Fragment { private WebView mWebView; private ProgressBar mProgress; @Override public View onCreateView( LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { final View v=inflater.inflate(R.layout.screen_five, container, false); mProgress = (ProgressBar) v.findViewById(R.id.progressBar); mWebView = (WebView) v.findViewById(R.id.webView6); mWebView.getSettings().setJavaScriptEnabled(true); mWebView.getSettings().setBuiltInZoomControls(true); mWebView.getSettings().setDisplayZoomControls(false); mWebView.setWebViewClient(new HelloWebViewClient()); mWebView.loadUrl("https://ttk-chita.ru/agent/balance-call"); mWebView.getSettings().setDomStorageEnabled(true); mWebView.getSettings().setLoadWithOverviewMode(true); mWebView.getSettings().setUseWideViewPort(false); mWebView.setWebChromeClient(new WebChromeClient() { @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { return super.onJsAlert(view, url, message, result);}}); return v; } @Override public void onCreate(Bundle savedInstanceState) { setRetainInstance(true); setHasOptionsMenu(true); super.onCreate(savedInstanceState); } @Override public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) { inflater.inflate(R.menu.menu_main, menu); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.refresh: Refresh(); return true; case R.id.action_logout: Logout(); default: return super.onOptionsItemSelected(item); } } public void Refresh() { mWebView.reload(); } public void Logout() { mWebView.loadUrl("https://ttk-chita.ru/agent/logout"); } private class HelloWebViewClient extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { mWebView.loadUrl(url); return true; } public void onPageStarted(WebView view, String url, Bitmap favicon){ super.onPageStarted(view, url, favicon); mProgress.setVisibility(View.VISIBLE); mProgress.bringToFront(); mWebView.setVisibility(View.INVISIBLE); } public void onLoadResource(WebView view, String url) { mWebView.loadUrl("javascript:(function() {" + "document.getElementsByClassName('navbar navbar-default')[0].style.display = 'none';})()"); mWebView.loadUrl("javascript:(function() {document.getElementsByTagName('H5')[0].style.display =" + " 'none';})()"); mWebView.loadUrl("javascript:(function() {var x = document.getElementsByTagName('TD');" + "var i; for (i = 0; i < x.length; i++) {x[i].style.padding = '8px 0px';x[i].style." + "fontSize='12px';x[i].style.borderLeft='1px solid #dddddd';}})()"); mWebView.loadUrl("javascript:(function() {var x = document.getElementsByTagName('TH');" + "var i; for (i = 0; i < x.length; i++) {x[i].style.padding = '8px 0px';x[i].style." + "fontSize='12px';x[i].style.borderLeft='1px solid #000000';x[i].style.border" + "Bottom='1px solid #000000';x[i].style.borderTop='1px solid #000000';}})()"); mWebView.loadUrl("javascript:(function() {var x = document.getElementsByClassName('container');" + "var i; for (i = 0; i < x.length; i++) {x[i].style.padding = '0px';x[i].style." + "margin='0px';}})()"); mWebView.loadUrl("javascript:(function(){var b= document.createElement('BUTTON'); document.body.appendChild(b); b.innerHTML='Alert'; b.onclick = function al(){alert('!!!');};})()"); mWebView.loadUrl("javascript:(function met(){var me=document.createElement('META'); me.id='" + "viewport'; me.name='viewport'; me.content='width=device-width, user-scalable=yes';" + "var hd=document.head;var old=hd.getElementsByTagName" + "('meta'); old.remove(); document.body.insertBefore(me, document.body.firstChild);})()"); super.onLoadResource(view, url); } public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); mProgress.setVisibility(View.GONE); mWebView.setVisibility(View.VISIBLE); } } }

UPDATE
The question with the mark was dropped, because in my case it does not work even if the page is loaded not from the site, but lies in memory and <meta> already registered ...

    1 answer 1

    All interested, thank you very much! The solution turned out to be painfully simple - inserting a meta tag not in <head> , but in <body> .
    Then it just goes on simultaneously using mWebView.getSettings().setUseWideViewPort(true);
    and
    mWebView.getSettings().setLoadWithOverviewMode(true);
    plus, adjusting the size of elements for greater readability.
    I hope someone will help too:
    1. onCreateView fragment's onCreateView method: mWebView.getSettings().setUseWideViewPort(true); mWebView.getSettings().setLoadWithOverviewMode(true); mWebView.getSettings().setUseWideViewPort(true); mWebView.getSettings().setLoadWithOverviewMode(true);
    2. In the onLoadResource or onPageFinished method of the onLoadResource class WebViewClient insert the viewport meta tag into the page body: mWebView.loadUrl("javascript:(function(){var m=document.createElement('META'); m.name='viewport'; m.content='width=device-width, user-scalable=yes'; document.body.appendChild(m);})()"); .
    3. Enjoy the result, or file the page elements with a file so that they are more readable (in my case, I simply removed the extra paddings).