I have a very weird problem that is not consistent. I have a header in my webview page that is regular html from my site. The images are linked to pages. Sometimes the links don't work and sometimes they do. If I move my finger below the image, sometimes you see the rectangular highlight press color box show up but way off from the actual image. It will just be in a random spot but always below the image somewhere. So the link href and the image are getting out of sync per say. If I reload the page it will be in the correct position again and the image/button works. It doesn't always happen. Works fine in desktop and mobile browsers. Just weird in webview. Anyway, have a suggestion or experience this and why its so random?
Use it like this
String s="<head><meta name=viewport content=target-densitydpi=medium-dpi, width=device-width/></head>";
webview.loadDataWithBaseURL(null,s+htmlContent,"text/html" , "utf-8",null);
For more reference
http://developer.android.com/guide/webapps/targeting.html
And in Samsung s3 like phones, sometimes this will not work .For that create a separate layout for xhdpi phones and change the webview's height to 40dp or something depending on your requirement for avoiding white space.
The problem wasn't with just webview it is mobile in general, specifically Android Browser which I believe webview uses. My header was position:fixed and after a lot of research I found that position:fixed is glitchy on mobile and causes weird things to happen. This was causing the clickable location of the links getting out of place when you scrolled even though the images never moved. So when you clicked on the image/link it didn't work because the location of the link was somewhere else on the page, usually under the image somewhere.
As noted on this blog solution which described my issue.
http://suratpyari.wordpress.com/2011/09/30/fixed-position-problem-with-android-webkit/
However the solution I went with was not to use position:fixed at all as I didn't want css hacks and to use the solution used at the SO link below using position:absolute to make the inner div scrollable. It actually works quite well and the scrolling is even more smooth and fluid now.
CSS 100% Height, and then Scroll DIV not page
So anyone else that may have this problem, it might be your fixed header. And it is "real" problem for the person who down voted my question. :/
Related
I have a WebView that is supposed to show what my webcam films.
When I go to my webcam from my mobile's browser it works fine, but when I try to do it from my application it looks like this:
http://i.imgur.com/muOHSrh.jpg
For some reason it zooms in, and the part of the screen thats "outside" is unreachable, even when trying to drag, scroll or zoom out (as can be seen in the picture, I'm trying to drag the screen to the right).
What I was able to find regarding my problem was this: Android - webview cuts off
I've tried the solutions there, but to no avail.
Would appreciate some help. Thanks!
Managed to find an answer.
x.getSettings().setLoadWithOverviewMode(true);
x.getSettings().setUseWideViewPort(true);
(When x is my WebView)
Fitting webpage contents inside a webview (Android)
I have programmed Android since 2.1 but I really don't know how the WebView decides on the sizing of Html elements like text and images, that it is rendering. I am loading my HTML as follows:
String displayHtml = "<html><header></header><body>"+someDivContent + "</body></html>";
webView.loadData(displayHtml, "text/html; charset=utf-8", "UTF-8");
So everything renders fine, except for one thing. The text is so small I can barely read it. Essentially I use my fingers to zoom out and then everything looks perfect, but what I don't get is why the webview defaults to something that is so unreadable? And how can I know programatically how much zooming out I need to do? Its as if the webview does not know it can scroll or something so tries to fit everthing into the visible area of the screen and so shrinks everything. The font size is not a reasonable default, nor is the zoom. And its not just the font size, the images are also shrinked. That's my question, I will soon post the exact html data, but I get this almost everything I load from a string. I almost never get it when I load via url.
UPDATE: This question is not: How do I zoom like others answered before. The question is given dynamic HTML how do I know if I need to zoom at all? And by how much?
Thanks in advance!
First, hello to everyone, I'm kinda new here, altough this site has helped me with lots of stuff.
Here's my problem, I've made images in 's with text behind them, so that when you hover with your pointer over it, the image slides to the side and you can read the text. Pretty simple. Now the problem that I'm having is that when I lower the screen size(eg view it on an Android), the responsive design kinda doesn't work for those images because there's some weird spacing to the left, even though the image can fit on that screen size.
Here's the site with the problem (I use it for learning purposes :)): This
your responsive works fine (bootstrap I guess). The problem is you have a fixed width in your .slide1, .slide2, .slide3 that is messing the 33.3333% width of your col-sm-4 . Basically you need to use mediaqueries to adapt your animation.
adding overflow:hidden to col-sm-4 will show you better what is happening, and adding to your slides max-width:100% may be the first steps to fix your web. Later your problem will be the image size
I'm having an issue with an AppMobi app: HTML5 and CSS on a WebKit browser concerning horizontally scrollable jQuery UI Tabs.
You can see an example here:
http://keith-wood.name/uiTabs.html#tabs-one-line
If you view that on your Android phone (at least when I do it with my Galaxy S3) you can see them, they scroll back and forth just fine, but none of the tabs are clickable. I'm having exactly the same issue in my app so it's a fine example.
The problem doesn't occur on my iPhone 5, and it's not a problem on Android if the screen is large enough that they don't need to scroll.
Anyone know of a way to achieve clickable tabs in this situation? I've added position: relative; on the containing elements, and it works better now, but if it is scrolled all the way to the right, it still doesn't work, but will now work if it's anywhere except all the way to the right. Weird.
Thanks!
I am developing a mobile site, so I'm using CSS to make things as liquid as possible.
I'm having an odd difficulty. Within a div container, I have a <p> that is supposed to fill the width of the div. I've tried width:auto, width:100%...nothing seems to work on Android Browser. Here are examples:
iOS (Correct):
Android (Incorrect; not fully spreading; added more text than iOS version so you can see what I'm talking about):
Both screenshots taken from respective emulators.
Here is the odd thing, though... If I give the class applied to these <p>'s a background color, the Android browser then allows the <p> to fill the full width of its parent div (looks identical to iOS). The really odd part, though, is that if I make the background color transparent (I thought I had it tricked lol), then it goes back to doing as shown in the example.
So, I have a <p> only properly referencing its CSS if it has a background-color applied... am I stupidly overlooking something, or is this some issue with Android Browser? Any ideas how to fix it?
Thanks for your time.
While it may not be the best solution, I finally just made an "invisible" transparent png and set it as the <p>'s background, and that fixed the issue... if you can call it fixing. :) I have to assume it is some kind of error in Android's Browser, as I tried this in every browser, desktop and mobile.
It is the intended behavior of Android phones. It will enhance the readability of copy text, since you are not forced to scroll sideways if you pinch zoom the page.
It can be managed on your own phone maybe in the browser's settings, but that is not the solution you want.
It can be 'fixed' by the workaround of applying a background-image to the element you want.
This can be done with a base64 encoded data url:
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
In your mobile browser's settings, look for something called "Auto Fit Pages" and disable it. This setting (in Android) is ON by default. Turn it off and your text will flow as it should.
the div or any element above this could be the issue.
if you give fixed width to the p element, does it work well ?