i am designing an app common for both andorid and ios apps. In this in a particular activity i am loading an url which contains an image. The size of the image is to be as
width - 960 and height - 640.
In the php code we have added the following line
<meta name="apple-mobile-web-app-capable" content="yes">
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name='viewport' content='width=320'/>
so that the webpage may get fitted within the screen size itself. This worked good for iPhone, whereas in android device i have loaded the page in a webview. My layout is as follows
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<WebView android:id="#+id/webView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</WebView>
</LinearLayout>
in my coding part is as follows
webView = (WebView)findViewById(R.id.webView1);
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://xxxxxxxx.com/page/8");
But still in my 480x854 device on android 2.1 version i am getting some white spaces in the bottom and right corner of the web page
Where as in the WVGA854 emulator of android2.2 the view gets appeared with a horizontal and vertical scroll bars.
In all the android device i need the webpage to be exactly withing the screen size, without any white spaces or scroll bars.how to get this.....
Try adding android:scrollbarStyle="outsideOverlay" attribute to the WebView xml description.
Some what i have managed the problem as follows
webView = (WebView)findViewById(R.id.webView1);
if(width == 320 || width == 360)
{
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://xxxxxxxxxx.com/get/6");
}
else if(width == 480)
{
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
webView.setInitialScale(85);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://xxxxxxxxxx.com/get/6");
}
else if(width == 540)
{
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
webView.setInitialScale(90);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://xxxxxxxxxx.com/get/6");
}
else if(width > 540)
{
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://xxxxxxxxxx.com/get/6");
}
else
{
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://xxxxxxxxxx.com/get/6");
}
You can try changing the viewport meta tag to:
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
Related
I want to load a website in android webview which has pretty good design but in webview only html content is showing. I don't have experience with Web but I think the CSS is not loading.
webView = (WebView) findViewById(R.id.webView);
webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setDomStorageEnabled(true);
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webView.loadUrl(myURL);
webView.setWebChromeClient(new ChromeClient());
webView.setWebViewClient(new MyWebViewClient());
Its working fine in iOS webview and in browsers.
Please help. Thanks!
I'm devloping an apk to display some web pages by using webview.
The web pages have two size:
640*530
<meta name="page-view-size" content="640*530" />
it's diaplayed like this
1280*720
<meta name="page-view-size" content="1280*720" />
it's now displayed full screen
How can i display all size pages in fullscreen with one webview?
The device is version is Android 4.4.2
I've tried these methods:
WebSettings webSettings = mWebView.getSettings();
webSettings.setSavePassword(false);
webSettings.setSaveFormData(false);
webSettings.setJavaScriptEnabled(true);
webSettings.setPluginState(PluginState.ON);
webSettings.setSupportZoom(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);
neither one is work for me.
Thanks.
you can try this for your web page header:
<meta id="viewport" name="viewport" width="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
I'm trying to embed an HTML page in a webview. The page has some jquery and javascript. When an input field is clicked it brings out the jquery datepicker. It works well in the native browser but, doesn't work in the webview. I did set enableJavascript to true but still not showing. So I'm not sure how it works if opened in the native browser, but not if is in webview. Am I missing anything? Any help is appreciated. This is my code:
myWebView = (WebView) findViewById(R.id.webView);
//Enable Javascript
WebSettings webSettings = myWebView.getSettings();
webSettings.setLoadWithOverviewMode(true);
//Enable DOM Storage
webSettings.setDomStorageEnabled(true);
//Enable Zoom
webSettings.setBuiltInZoomControls(true);
//I was adviced to place some of this to handle page navigation:
myWebView.setWebChromeClient(new WebChromeClient());
myWebView.setWebViewClient(new WebViewClient());
//other settings
myWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
myWebView.setScrollbarFadingEnabled(false);
//finally, load url
myWebView.loadUrl("https://www.mycustomurl.com");
You have to enable Javascript in your webview...
like this,
WebView.getSettings().setJavaScriptEnabled(true);
in your code, add this too..
webSettings.setJavaScriptEnabled(true);
I am loading .html file on Android Webview. That htmnl file contains textFields. So as the user taps over textfield our webview is getting zoom in. As a result my webpage getting widened (out of content )
I am using the code as:
WebSettings webSettings = m_webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setBuiltInZoomControls(false);
webSettings.setLoadsImagesAutomatically(false);
webSettings.setUseWideViewPort(false);
webSettings.setDefaultZoom(ZoomDensity.FAR);
webSettings.setSupportZoom(false);
Please let me know if anything i am missing.
Thanks in advance
You need to add to your html:
It's also a good idea to add the next settings to your webview.
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
webView.setInitialScale(1);
settings.setJavaScriptEnabled(true);
settings.setSupportZoom(false);
You need to change your code in order to set zooming controls in your app
webSettings.setJavaScriptEnabled(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setLoadsImagesAutomatically(false);
webSettings.setUseWideViewPort(false);
webSettings.setSupportZoom(true);
Try using
webview.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
I am planning to display images from SD card in a webview in order to take advantage of he built in zoom capabilities of webview. However, I am facing an issue with displaying images that are bigger than screen size (e.g. 1800x1200) to fit the screen initially, like in an ImageView. I want the image to be displayed in full at first and provide zoom control to the users.
I have tried using WRAP_CONTENT for webview's width and height, but that does not work.
Any ideas?
Following is a code snippet I am using:
String path = getRealPathFromURI(mUriList.get(0)); // this gets the file path
webView = (WebView) findViewById(R.id.WebView01);
WebSettings settings= webView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setSupportZoom(true);
webView.loadUrl("file://" + path);
private WebView mWebView2;
mWebView2 = (WebView)findViewById(R.id.webview);
mWebView2.getSettings().setJavaScriptEnabled(true);
mWebView2.getSettings().setLoadWithOverviewMode(true);
mWebView2.getSettings().setUseWideViewPort(true);
mWebView2.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView2.setScrollbarFadingEnabled(true);
mWebView2.loadDataWithBaseURL("file:///android_asset/", "<img src=\"banner5.png\" height=\"98%\" width=\"100%\"/>", "text/html", "utf-8", null);
Images are in the assets folder
If you write your HTML correctly, you don't have to do any "setLoadWithOverviewMode", "setUseWideViewPort" or "setInitialScale". And there is absolutely no reason to enable JavaScript.
This one line worked for me:
webView.loadDataWithBaseURL("file://" + directory,
"<img src=\"" + name + "\" width=\"100%\"/>", "text/html", "utf-8", null);
The underlining HTML code is:
<img src=YourImage.png width="100%" />, by not setting a height, its aspect ratio will be kept.
That did the trick for me:
webView.setInitialScale(30);
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
WebSettings settings = webView.getSettings();
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true)