I'm using Anddown to convert some markdown text to html and I want to display the html in a webview. The webview is part of a fragment that takes up around half the screen on a tablet in landscape.
I want the html to appear at 'normal' scale, as in I never want it zoomed out so you can see the whole page. Most of the time this is fine since text in blocks wraps when it reaches the end of the view. But some of the markdown elements result in an html element which stretches the view horizontally, so I've got something that looks like this:
----
----
----
--------------
----
(imagine the dashes are text, the short lines are wrapping correctly to the fragment width)
When I load that to the webview, the page is zoomed out fully so that that long horizontal line fits the width of my view. I don't want this, I want the webview to always be zoomed in. The weird thing is that sometimes when I load the html to the webview, it will automatically zoom in to what I want (but with some horizontal overflow). This doesn't happen every time and when it does, I can see the zoomed out version for a split second before it resizes.
So my question is, how do I get it to default to 'zoomed in' always? I don't care if it means there's some horizontal overflow, I just want the text to be 100% in scale (if that even makes sense).
For normal scale you should use this viewport tag (on your html's header):
<meta name="viewport" content="initial-scale=1, maximum-scale=1,minimum-scale=1">
Now, if you want different scale you can change these settings (for example use a scale of 2)
Hope that answers your qauestion
If you're using text.
Have you tried using
word-wrap:break-word;
So the text won't be outside it's parent
Related
I use a android.webkit.WebView to display some HTML formatted info to the user. Whenever I "page" in my application, I reuse all the graphical elements on screen and just fill them with different content. A WebView will by default increase its size to fit the contents, but won't decrease if the content shrinks.
To fix this, I call webView.clearView() to clear the view and then webView.loadDataWithBaseURL(null, html, "text/html", "utf-8", null)to reload it with data. It works, but it creates a very strange behavior where the view starts to flicker persistently. The flickering area seems to be the same size as what would have been left empty after filling it with smaller content.
I can't describe this better with words, so I created a short video to illustrate the problem:
http://www.youtube.com/watch?v=yL7tQpRSFe0
The WebView is the yellow box on the lower part of the screen.
Am I doing something wrong, or is it a bug?
If this is an Android bug, is there a better way to resize the view as to circumvent this problem?
Is it possible to scroll out of the page bounds in a webview?
Example: Webview page/content width: 15px, screen size: 10px. Can I scroll to X position 8px?
Technically I can, and it worked fine on my test device. However, testing on other devices I notice that it will stop rendering when I move out of the bound. The left part of the page will be 'blurry' or not visible at all, till I scroll back left and there is no more "empty space" in the webview, than it will update.
Is there a solution for this?
A possible solution would be making the content larger on the fly, with white space. But I cannot add padding to the webview, unless I put it in the html BEFORE I render it. But before I render it I won't know the width. After I render it there is no way to change the padding/add some empty space to the content, without loading it completely again. Right?
I solved this by added 1-2 page-breaks at the end of the html, it will render fine now and I customly prefent the view from scrolling to the end of the page, so that the white is not shown to the user.
I'm working on a project where I have a stationary bar (to become nav bar), and then directly below it is a rectangle which is setup so that when you click it, it flips over. The width of both the nav and the flipping div are supposed to be the exact same, and they are when viewed in FF, Chrome, Safari, IE...but when I just checked it in the Android browser, the flipping div is about 10 px less in width than the nav bar. I've narrowed this down to the fact that I'm using 'display: table' in the div 'outerContainer' to vertically and horizontally center the contents of 'innerContainer' (which is set to be display: table-cell). This is an example of how I currently have it setup, which displays correctly in all browsers but the width of the flipping box is less in Android browser: http://jsfiddle.net/adRP4/9/
As soon as I remove the 'display:table' from .outerContainer, it displays in the Android browser at the proper width, however the content is no longer centered as I want it. This example shows the display: table removed will the proper width displaying, but the content not centered as I want it: http://jsfiddle.net/adRP4/10/
The vertical/horizontal centering method I used is based on: http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html (similar to http://css-tricks.com/vertically-center-multi-lined-text/) ... when I tried changing it to the method outlined her: http://css-tricks.com/centering-in-the-unknown/ I ran into all kinds of problems...
Any suggestions on how to fix this?
UPDATE (6/28)--I discovered that when I check an iPhone, I have the exact same width mismatch as in the Android browser..
Thanks,
Mark
I'd suggest to use a DIV for the flip, and then, adding a div filling the flip and set as TABLE.
Or I suggest using the floater in the method 3 here : http://blog.themeforest.net/tutorials/vertical-centering-with-css/
Very general question: I have multiple widgets in a ScrollView Android app. A standard ScrollView, mobile can show say 720 lines and user can scroll down then back up going thru multiple widgets (text panes, buttons etc). Problem is that I want to add a WebView that will display an HTML table; the height of this HTML table will be variable size.
Is there a way to change the height of the WebView based on the size of the HTML table it should display?
Yes, you can get a reference to the WebView, then set the height of it, with the setHeight attribute.
Maybe you would be better off letting the container take care of that for you, and set the attribute to "wrap_content".
I guess, you need to calc web-view content size (here and here and enter link description here), than set webview size to content fits (maybe here). In that way you should have only scrollview scrolling.
Good luck
I have to display an area map in my application. This map is provided as a large jpg file (>1000px * 1000 px). I display it in a webview and I also use the build in zoom controls and the zoompicker, which works pretty well. Now I want to limit the zoom, so that the image can't be smaller than the listview height. Because when I zoom out, and the image gets smaller, a white area is display underneath the webview and this is whatI want to avoid.
Regards, Hof
Insert this meta tag in the head element:
<meta name='viewport' content='target-densitydpi=device-dpi,initial-scale=1,minimum-scale=1,user-scalable=yes'/>