I've been trying now for the better part of a day to figure out something that is surely very simple - zooming in a WebView using the pinch gesture in a Caliburn Micro application.
I have a Caliburn Micro app that has several pages, one of which has a WebView on it. I've been trying to get that WebView to zoom without putting it in a separate ScrollViewer b/c the ScrollViewer seems to introduce other behavior oddities. I'm not having any luck getting the WebView to zoom.
EDIT: I'm basing my "it don't work" claim on behavior I'm experiencing when I'm remote debugging on a local Dell Venue tablet.
Here is what my ShellView page looks like in the big Caliburn Micro app (with the non-working WebView):
<Page
x:Class="FooBar.Views.ShellView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<WebView x:Name="WebView"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
</Grid>
</Page>
Despite my best efforts, this doesn't allow me to zoom.
To try to see what I'm doing wrong, I created another project that's a very simple, one-page Caliburn Micro app, with the exact same markup as the multi-page CM app and it works as expected. More specifically, the app starts, creates the first view - ShellView - loads the WebView source and then proceeds to allow me to zoom without issues.
I've added all the styles from the non-working app to the working app, thinking maybe there's something going on there I'm not aware of and the second app still works.
I've tried explicitly setting the Height/Width of the WebView and the containing Grid of the non-working app without any luck. I'm not setting any Heights/Widths of any object in the working app.
I know I've got to be doing something/omitting something very silly, but I can't see it. Please help.
Thanks!
Turns out, it was the website itself I was navigating to. It had the -ms-content-zooming CSS attribute set to none.
I found that CSS attribute from this SO question: How to disable zoom in Windows 8 webviews.
Then I used this SO post to inject it into my WebView: How to create a <style> tag with Javascript.
Worked like a charm and I was able to immediately start zooming. Thanks, SO!!!
Related
Problem
We have an Ionic2 project. Ionic (on iOS) creates a Safari browser. Safari allows for what I call "overscroll". This is when you can scroll beyond the top or bottom of the page and the page snaps back.
One of our pages has a small signature pad. If a user tries to sign with their finger, they instead scroll the screen. The page content is small enough that it shouldn't be scrollable, but the overscroll causes the page to move.
Desired
We just want to disable the blasted overscroll.
Really all of our Ionic projects suffer from this drawback in some form or another, but this is the first project where it blatantly breaks functionality. In other cases it's just an annoyance.
Appeal
Is anyone familiar with how to disable this overscroll? Whether through ionic, a cordova plugin, or the HTML itself.
If I have understood you correctly then this is actually really easy to do.
Just add no-bounce to your <ion-content> element.
e.g.
<ion-content no-bounce>
I'm creating a cross platform app using Xamarin Forms. I did all my testing in iOS and the app looks perfect. When I view the Android project in the Xamarin Previewer, the buttons' images are way too big. Since all my images are hi res, I created some smaller, low res ones and put them in the drawable folder and moved my other images to drawable-hdpi.
I expected the buttons to resize to the images but that's not the case. I remember reading somewhere how to handle this but after 2 days of searching I can't seem to find it.
The button is in a Grid and defined like this:
<Button x:Name="facebookBtn" Grid.Column="1" Grid.Row="5" Image="facebook_btn.png"/>
Here's what the button looks like:
I know at the time of the question probably ImageButton was not available , but now you can use ImageButton instead, this way you will also preserve the click effect of the button as stated in your comment.
<ImageButton x:Name="facebookBtn" Grid.Column="1" Grid.Row="5"
Source="facebook_btn.png" Aspect="AspectFill"/>
There seem te be some subtle differences in the Implementation or configuration between WBWebView and Safari (and SFSafariViewController) that renders a part of the Website I want to display unusable.
Here is what I am trying to do:
Basically all that is needed is an "App" that just opens a specific website in fullscreen mode, so no chrome, URLs or additional navigaton buttons are present. The Website works fine on Safari on iOS (and every other (modern) browser on desktop or mobile) but the menu does not when embedded in the App.
All I did was creating a new single view Application in Xcode, drop in a WKWebView and have it load the URL. The part of the page not working is this menu component that is used throughout the site: http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/ So basically the user has no way to navigate. While debugging the website it seems like when I push the menu button the menu does not expand like it should because the changed css classes dont get picked up correctly. If I manually toggle the css classes on the menu-element it gets displayed correctly. It makes me wonder if there are some additonal constraints related to WKWebView?
Can anyone tell me if there are any settings or configurations I can alter that allow the website in WKWebView to behave exactly the same as it would under Safari?
As far as I understand SFSafariViewController I always get the browser toolbar and navigational elements which I dont want to have in the app, so that is not an option- or is there a way to get rid of that?
Any help or pointers would be greatly appreciated :)
i'm developing a simple three tabs app for Android and iPhone, using IBM Worklight as framework. Every tab links to a div with data-role="page", as jQuery Mobile specifications.
If I implement the jquery fixed persistent tabbar like is explained there (http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-a.html), i'm encountering some flickering on the tab item in page transition (with any transiction effect).
If I set the default transition to "none", I could resolve this problem, but I lost the transiction native-like effect.
This behavior appears only if i test the App with a real android device (Xperia Neo, GS2).
If i navigate trough the pages of http://jquerymobile.com/demos/1.2.0/ with my smartphone, especially here: http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-d.html i can't see the strange behavior, but the footer won't be persistent trough the pages, it just re-render like the whole content and this is worse (this happen with the stock browser or Dolphin, instead looks very well by using Chrome).
Is there a way to improve this effect or there is another way to implement fixed persistent tab bar?
I used as reference the default Android Contacts App.
Maybe you're getting this flicker because you're navigating between pages using rel="external". Try to pass from one page to the other without ajax and you'll see that flickering will dissapear
The problem is due to poor performance of the WebView of the Android environment in rendering 3d transition.
Solved by removing the transition effect with:
$.mobile.defaultPageTransition = "none";
Something else that could help is putting these attributes in the AndroidManifest.xml:
<supports-screens
android:anyDensity="true"
android:largeScreens="false"
android:normalScreens="true"
android:smallScreens="false"
android:xlargeScreens="false" />
<application
android:debuggable="false"
android:hardwareAccelerated="true"/>
I am just finishing off a mobile web application for a client. I have written it using MVC3 and Razor and using jQuery Mobile. Something I hadn't noticed but the client has is that Safari (and only Safari) seems to be able to move around the screen when using the web application. Difficult to explain here but you can slide the whole browser to the left, right, up and down leaving a Grey background behind it, this is not something that other mobile sites do. Does anyone have an idea of what this might be? I don't even know where to start with it! Thanks in advance to all who contribute.
I suppose it has to do with the issue described in this question: jQuery - draggable images on iPad / iPhone - how to integrate event.preventDefault();?
Ok for anyone who comes across this I have found the solution. The css that comes with the jquery mobile framework contains the class ui-body-c (with the c being replaced by other letters dependiong on theme). In this class there is a border: 1px solid #ccc;, removing this has removed the issue without changing any styling on the site.