My android app loads into a webview a web application in a unique html.
My css is huge like 350kb. Sometimes in slow connections(mainly EDGE) not all the styles seems to load correct.
Some images (I am using data uris) are missing and some parts simply doesn't load the css styles.
I've tried to put the style inline in page (supposing that the css file got errors) but with no effect.
It seems like the android webview just stops the css parsing and shows the page.
Has anybody experienced something like this? How could I fix this in a nice way?
I have tested in Gingerbread only.
I think using of mobile app web-based is to be more lighter then the desktop equivalent, because of slower connection of this devices. Have you try to separate the css to see if this issue is because of big loading?
Related
We are developing app for Android and iOS for displaying data from server via API (Data is html). But when set data for webview to be displayed, on Android and iOS has difference.
Suppose web has 3 responses with 3 html(with difference html, css (font size, font name)). But on iOS, font size is same for 3 html, on Android, its has difference between 3 html. I have saved html content to file and open by chrome on windows and iOS. The result on Windows like Android and on Mac like iOS.
I dont know what but I think that has a difference between apples's OS with other OSs.
Anyone know why? Please explain me. Many thanks.
Sorry I can't post html contents to here.
I have a Phonegap app which runs ok in Android and iOS, except for one reason: one of the images below don't load for nothing in the Android app, but works ok on iOS:
It works: http://mobile_server.s3.amazonaws.com/banners/assets/000/000/021/medium/serra_azul.jpg?1410372361
It wont: http://mobile_server.s3.amazonaws.com/banners/assets/000/000/017/medium/boscato_banner_app.jpg?1410372359
I checked many things like image size, especial characters, network loading (debuggin' in Chrome browser), but I think that those are not the reason.
The method im using to load the image is just a <img src="..." />. Im sure that there is no problem here, because the first image works perfectly.
Maybe someone can check these two images and tell me the difference that one has to another which can make the second image don't load in Android app.
Thanks,
I am making Highlighter for Android in WebView.
For the highlighting purpose, in one example i am using JQuery and Rangy, in another pure Javascript and XPath. I am trying the same Highlight in Desktop Browsers also.
Please refer to the previous questions which i posted for the problems which i am facing during Highlighting...
-->> Problem when using XPath
-->> Problem when using Rangy (Not answered yet!)
So... from the responses to these question, i came to the conclusion that
the DOM structure of the loaded HTML in WebView is inconsistent and different than that of the same HTML page loaded in Desktop Browser mostly with reference to "TextNodes"..
To support this conclusion, i have created a jsFiddle (link in the question).
But, i also think that WebView may not be changing the DOM structure but it surely returns incorrect TextNodes inside a div...
Now the question is, is there any way to stop this change in DOM structure of the HTML in WebView?
Any insight guys?
Is there a way to load someones website into webview, and then apply your css to it(that is stored in your app or some other server) ?
I have been searching for an answer for a month now, and nothing seems to work, i tried using some functions from WebView that load and store the html of the site and then load it with my url(or some similar solutions), the css is applied but then the sites javascripts dont work, the links are messed up and all sorts of problems occur.( also jsoap is not the answer, tried it, or maybe i didnt figure it out correctly )
Long story short, load www.some-site.com but make it use your css and remain fully functional?
Easily done with WebViewClient.shouldInterceptRequest.
I am having some problems with a webview I am using to access a specific URL within my Activity. When I load this exact same URL on a PC browser such as firefox, the edges of the grid are displayed
When I try to load the same URL from within my WebView by using
webView.loadURL("www.url.com");
I get the following grid.
Any ideas on how I can fix this? It's not a major issue, just annoying.
And this isn't real data, so don't worry about that.
I don't know that much about HTML so maybe this is an HTML issue?
Apologize for using imageshack, I can't post images yet.
Have you tried scrolling to the side? Does it display the images, then?
You might try the following:
Building webpages to support different screen densities
Take a look at the Android documentation there. It should give you a good example of how to get your data to display properly on any device.
Hope this helps!