I want to have a div that has exactly the same size as the screen (or viewport) so the code:
<html>
<body style="width:100%;height:100%;margin:0;background:blue">
<div style="width:100%;height:100%;background:red"></div>
</body>
</html>
Simple. It shows a red screen in my desktop chrome browser. Same with the android mobile chrome. But with a WebView in my app, it shows a blue screen. I've tried 50% height and it works well as intended in both of desktop and mobile chrome browser, but not for WebView. The div always has height of 0. Red rectangle is shown only when I set the height of div in an absolute unit like 100px. How can I make it work properly?
you can easily achieve with javascript.
Do you know javascript code ?
<html>
<body style="width:100%;height:100%;margin:0;background:blue">
<div id="myDiv" style="width:100%;height:100%;background:red"></div>
</body>
</html>
<script>
var val = window.screen.height;
document.getElementById("myDiv").height = val;
</script>
And one last thing is javascript enabled in webview client.
Okay I think I found out what was wrong. Basically android webview and chrome for android share the same rendering engine. This doc says:
New Webviews also share the same rendering engine as Chrome for Android, so rendering should be much more consistent between the WebView and Chrome.
So if some code works for one, it is supposed to work for the other. If it doesn't, probably there's something wrong with the settings on the webview. API doc says:
It is recommended to set the WebView layout height to a fixed value or to MATCH_PARENT instead of using WRAP_CONTENT. When using MATCH_PARENT for the height none of the WebView's parents should use a WRAP_CONTENT layout height since that could result in incorrect sizing of the views.
My webview layout:height used to be set to WRAP_CONTENT and after I changed it to MATCH_PARENT, it worked just as chrome for android.
Related
I'm trying to write a responsive website that set's the maximum height to 100% and everything is on-screen without needing to scroll. Setting {height: 100vh} works on a flex box in the desktop. However, when I view the site on mobile, then it scrolls, ignoring the height of the browser tab in chrome. I would like to set the height to something like {height: calc(100vh - address bar)} so that it shrinks the height of the document so everything fits without scrolling or hiding the browser tab.
Have you included the viewport meta tags in the head of the web page. From experience this can change the effect that certain CSS has on the mobile version.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If that's doesn't work out, perhaps use media queries and use 100% instead of 100vh.
I have an HTML page and a full-screen Android webview. The HTML content is larger than the webview's visible area. I want to fit the HTML content to the width of webview.
What's really important is this: when the device's orientation changes, the webview will not reload, meaning it will just resize and the content would still fit to width.
One more thing: because the content has been scaled down, user can zoom it in to a maximum scale of 100%. When the content is zoomed and orientation changes, I want the content to fit-width again.
Edit 1: I can change meta tags in the head of HTML, but its content remains larger than the webview's visible area. I'm supporting Android 2.3 and later.
Edit 2: Thanks for the suggestion on responsive web design. I know what it is and I can do it. Problem is I cannot change much of the HTML content in this case.
TL;DR: How to always fit a larger HTML content to a Android webview's width as the webview resizes, without reloading the content. (I can change the webview, not much of the HTML.)
do following settings
webview.getSettings().setUseWideViewPort(true);
webview.getSettings().setLoadWithOverviewMode(true);
This may sound like a cop-out answer, but I think it depends on how you're building the rest of your site. Whenever I work on responsive sites, I use:
<meta name="viewport" content="width=device-width, initial-scale=1">
This will do two things: width=device-width will find the width of your device, and send styles from your CSS that match that size (you can set styles for specific sizes in your CSS, using media queries). Initial-scale=1 will make the site show up at 100% when it loads, but still give users the option to zoom in.
If your site is developed for a specific width, you could try using:
<meta name = "viewport" content = "width = 980 (or whatever the width you're designing for)">
This will just scale down your site to fit the device width. Nothing super special here, users will basically just be shown mini-desktop sites.
I'd recommend reading this Webdesign Tuts+ article. They explain the viewport meta tag well, with examples.
You need not change anything on Webview , all u need is Responsive
Html Page, If you are designer then that will solve ur issue or u can
post a part of ur Question with UI tag.
To built Responsive html pages u can visit : HERE
Result : You need to test on webview while creating your responsive
html page, default brower of android itself reflect that ur html page
is responsive or not.Once it will work in default brower in Android
device then it will work in any webview in android.
Testing : you can test ur responsive html page HERE
I would have to see the source of your HTML and CSS. You have to exclusively use % sizes and never use fixed width px sizes. Then, the user can change the size of the browser and it will dynamically resize. I also use % widths because of this. It also dynamically resizes if you use CTRL-MouseWheel (zoom).
Here's a tip for responsive web design, use positions instead of widths:
For example:
html
<div id="somediv">I'm just a div, just a regular div.</div>
css
#somediv {
left: 0; /*numeric value in pixels you would like this div to be from the left */
right: 0; /*same as above, except on the right */
height: 50px;
width: auto;
}
The div above will automatically resize based on screen width.
Our client requested a website, but didn't want to pay for a mobile version. We still are making it work on mobile. When zoomed all the way out, Chrome on Android (4.0) is scaling a bunch of the text. We have tried setting the -webkit-text-size-adjust:none property, but it seems to be ignored and text is still being scaled up.
Works fine on iOS.
Any suggestions?
Just discovered a workaround for this. Set a max-height on a parent element of the text to be much larger than it would ever appear. For example,
<p class="intro">
This is some text that is appearing blown up
and ridiculous on Chrome Mobile.
</p>
p.intro {
max-height: 5000em;
}
You can set the max-height on any parent element. It doesn't have to be the first parent. For example,
<footer class="primary">
<p class="intro">
This is some text that is appearing blown up
and ridiculous on Chrome Mobile.
</p>
</footer>
footer.primary {
max-height: 5000em;
}
Note that the -webkit-text-size-adjust property you mention is non-standard. Read more about it here.
Currently Chrome for Android scales text using font boosting and there's no way to disable it.
If you want a way to disable font boosting, please provide your use-case and log an issue via new.mcrbug.com.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes"> in the <head> tag could disable zoom
I had the same issue with Firefox on Android.
The solution for me was to add the style "float: left;" to the div containing the problem text.
You might need to set the width of the div to the same as the parent (in pixels or 100%) to ensure it doesn't affect the rest of the divs.
See How to prevent mobile browser from resizing text
-webkit-text-size-adjust:none is so horrible!
I have poor eye site and constantly have my pages at 200% default zoom. With -webkit-text-size-adjust:none, I cannot read anything, and my only alternative is to use Firefox. It's my number one problem these days when browsing.
Too many sites use this, especially embedded Facebook comments on web pages. You should stop using it and create an interface that will work with any-sized font.
I have the HTML code below. I have set the body's width to 640px which is close to what the iPhone's resolution is. However, when I view the webpage on either an iPhone or an Android, it shows up just like it would in my web browser - only taking up part of the screen. The text is so small it's not usable.
What CSS code do I use so that the text stays normal in desktop browsers, but fills the screen on a mobile device? I read some things about using device-width properties but I can't get those to work either. What am I doing wrong?
Note
I'm not trying to get the red border to stretch all the way across the screen (eg: body:width100%). I just don't understand why the iPhone is not zooming into an area that is set to the same resolution it is supposed to have.
HTML Code:
<style>
body{ width:640px; border: 1px solid red; }
</style>
</head>
<body>
Hello World
</body>
</html>
Actual Output:
Desired Output:
Put this in your head tag:
<meta name="viewport" content="width=480">
To make the iPhone zoom in on the page, you can use the viewport meta tag.
You can set a scale of 1.0 to make Mobile Safari zoom in on your content exactly, no matter it's actual size.
Here's some documentation on different ways of setting the viewport: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Have you tried body { width:100%; border: 1px solid red; } ?
You'll have to use media queries for this.
http://www.alistapart.com/articles/responsive-web-design/
Example: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html (Resize the page)
A seemingly straight-forward tutorial: http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
If you're creating a webapp for iphone, you should really take a look at PhoneGap. If you're feeling a bit adventurous, it really is quite easy to use.
I noticed a problem on Android's default browser, where 100% width may actually go past the edge of the screen. Here's a minimal test case:
<div class='separator' width=100% style='border: 2px;padding: 2px;border-style: solid;'> </div>
<div class='separator' width=100% style='border: 2px;padding: 2px;border-style: solid;'>New & improved div</div>
<div class='separator' width=100% style='border: 2px;padding: 2px;border-style: solid;'>another working one</div>
<div class='separator' width=100% style='border: 2px;padding: 2px;border-style: solid;'>another</div>
This works as expected on a desktop browser, but in Android webkit browser, the first div goes way off the screen, and doesn't change width when zooming in and out. The divs after it work correctly.
Update: I've tested this on 2.3, 3.0, 3.1, and a newly created 2.2 emulator, they all fail to size it correctly. It looks like other people have noticed this, see here
and here. Anyone know a good workaround for this bug?
Just add this meta tag inside your html head tag .I've checked it with android 2.1 browser and it works fine on zoom.
<meta name="viewport" content="width=device-width" />
In my WebView, I was able to fix the widths by turning off wide viewport.
webview.getSettings().setUseWideViewPort(false);
This disables horizontal scroll unless absolutely necessary, and div widths and zoom work as expected. Obviously this will only work with a custom WebView, maybe there is a more generic way to do this with something like <meta name="viewport" ...> ?
use
layout_width="fillparent"
:)