I have an activity with a layout like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="${relativePackage}.${activityClass}" >
<include layout="@layout/window_title" />
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_below="@+id/linear_layout"/>
</RelativeLayout>
Here is how I'm configuring it:
// Enable JavaScript.
WebView myWebView = (WebView) findViewById(R.id.webView);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
// Settings so page loads zoomed-out all the way.
webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);
webSettings.setBuiltInZoomControls(true);
Here's the version setting from my manifest file:
<uses-sdk
android:minSdkVersion="10"
android:targetSdkVersion="17" />
I'm trying to load this page in the WebView:
https://new.livestream.com/lcboise
The page loads just fine, but I can't pinch to zoom. I've tried different combinations of the WebView settings (above, including others not listed) but it just won't zoom.
Observations:
1) Loading up a different page I'm using (https://lcboise.infellowship.com/UserLogin) in the EXACT same WebView allows me to zoom.
2) My main test device, where is DOES NOT work, is a HTC One running v4.4.3 of Android.
3) I can load, and zoom, the livestream page on an older test device I'm using that's running v2.3.3 of Android.
Is it possible that something in the page itself is breaking the WebView running on the HTC One? If so, any guesses as to might be doing it?
Update [SOLUTION]:
Here is what I had to add to my WebView to get pinch-to-zoom to work:
myWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
String javascript="javascript:document.getElementsByName('viewport')[0].setAttribute('content', 'initial-scale=1.0,maximum-scale=10.0');";
view.loadUrl(javascript);
}
});
getSettings(). setBuiltInZoomControls(true); per this answer to default my view to zoomed out and to be able to pinch-to-zoom.
This example demonstrate about How to enable webview zoom controls in android. Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml.
Press and hold Ctrl and press and hold left mouse and while doing that move your mouse. With a trackpad: Press and hold Ctrl and press and hold your trackpad and move with a finger to the LEFT and RIGHT (not up and down).
For some reason, certain phone models have a hard time with certain touch gestures and are not as responsive. To mitigate that, turn on this option and check if the pinch-to-zoom is still not working on your Android. Open Settings. Select Display. Expand Advanced. Toggle on the Increase touch sensitivity option.
Your snippet can actually enable the webview zoom by fingers, however it adds an additional zoom in/out button besides the webview native ones. Do you know any way to disable them?
Here’s how to force zoom on every website in Chrome for Android: Open Chrome. Tap on the 3-dots menu and open Settings. Open Accessibility. Check the “ Force to enable zoom ” box. Close Chrome and open it again. After this, you should be able to zoom in on any web content.
You can disable inch on Chrome by going to http://flags/#enable-inch in your browser. Pinch zoom still is experimental and turned on by default, which signifies that it will likely be force-enabled in future versions. How Do I Activate Pinch Zoom?
This is the page you linked has the following viewport meta tag:
<meta name="viewport" content="width=1024, maximum-scale=1.0, target-densitydpi=device-dpi">
The page that works has a different viewport meta tag. The maximum-scale
bit is telling the WebView to not allow zooming in more than the specified amount.
The site should also be broken in any modern mobile browser. Setting maximum-scale to a low value like that is not very "mobile friendly" so it might just be a bug on the site. Have you tried contacting the owner, maybe they can fix it server-side?
There is not a whole lot you can do in the WebView that will not result in other sites rendering incorrectly. You could try injecting JavaScript to fix up the page by changing the meta tag as a last resort.
Add these two lines to enable pinch to zoom in webview
webview.getSettings().setSupportZoom(true);
webview.getSettings().setBuiltInZoomControls(true);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With