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"
:)
Related
I have this very simple W3C valid HTML that Firefox for Android refuses to render in 100% view:
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Devastacao por lei</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h3>Nothing here</h3>
</body>
</html>
No matter how much I pinch out, Firefox still renders the horizontal scrollbar and allows me to move the text right and left (i.e., scroll the page horizontally). I can zoom in, but I cannot zoom out to the point that I cannot scroll left/right without moving the text/page.
I tried fiddling with the Accessibility settings without luck. Tried with about:config, but it shows nothing.
Chrome renders the page perfectly.
Is this a bug? Maybe this problem happens with my device only...?
EDIT: Bug reported here
This is definitely a bug in Firefox, and only happens when the height of the page is smaller than the device height, that is, when the full page fits in height, AND when "Scroll to hide toolbar" is ON in Settings - Customize.
To check this, just add lines after the <h3>Nothing here</h3> of the form test<br> one by one. You will see the same problem. Keep adding lines until, suddenly, the page does not fit anymore in height. Then the page finally fits in width if pinched out, and everything works just fine.
WORKAROUND:
Just add this line to your HTML:
<div style="height: 101vh;visibility: hidden;"></div>
or, better, adjust the height to your page.
Notice that this will make the scrollbar to appear, and that the page will scroll even if there is "nothing" in the bottom. Setting overflow:hidden; for body or html prevents the workaround from working.
Maybe someone can find a better workaround...?
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.
No one ever quite answered this similar question,
Blurry images on stock android browser
So I'm going to post my own version specific to my situation.
The problem is that position:fixed causes child image elements to be blurry in some android browsers. In my case, it causes the stock browser of Galaxy Note v1 running Android 4.0 to experience this issue. Others have said the same thing for some Galaxy S3. Here's my code:
Preview # http://jl.evermight.net/blurryposition/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="top-nav-container"
style="
display:block;
top:0px;
position:fixed;
width:100%; height:5.2rem;
">
<a style="background-image:url(logotest_big.jpg);
background-size:20%;
display:block;
width:500px;
height:200px;
"></a>
</div>
</body>
</html>
You'll notice that the OPTIX Testing logo is blurry at first. If you remove position:fixed from the #top-nav-container, then the logo is crisp and clear. So my question is, how do I keep both position:fixed and a crisp logo?
In my real website, the top navigation is supposed to stay fixed while you scroll through the site. I tried using position:absolute and using javascript to reposition the top navigation on scroll, but that caused a whole bunch of jumping/flickering effects. So if I can't use position:fixed or position:absolute to fix the top navigation to the top of a mobile web browser, what are my other options? How do other mobile websites achieve this result?
Additional Info:
I did some more experiments with the resizing image, changing view port, and changing the position:fixed/absolute and came to some interesting results. See below:
position:fixed no-background-size with-viewport - fuzzy
position:fixed no-background-size without-viewport - crisp
position:fixed background-size:20% with-viewport - fuzzy
position:fixed background-size:20% without-viewport - fuzzy
position:absolute no-background-size with-viewport - fuzzy
position:absolute no-background-size without-viewport - crisp
position:absolute background-size:20% with-viewport - crisp
position:absolute background-size:20% without-viewport - crisp
Here's how to read this chart:
first column states whether #top-nav-container is using position:fixed or position:absolute
second column states if i used background-size:20% or if i omitted it
third column states whether i included the <meta viewport> tag in the head
fourth column states whether the optix testing logo is fuzzy or crisp.
Looking at the results, you can see that the only time you get a crisp image with a container that has position:fixed is when an image has not been stretched or compressed via background-size or or with the view port. Also, the only time you get a fuzzy image with a container that has position:absolute is when an image has been stretched with background-size and with a viewport.
Using position: fixed is still a bad idea on mobile devices. The overwhelming majority of websites fall back to a static header for mobile views (ie. no floating navbar).
I experienced similar issues recently, as illustrated in this question.
A few resources for you:
Read this article on Quirksmode to learn about the problem: http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html
See which mobile browsers support position: fixed in this table: http://caniuse.com/#search=fixed
add inside top-nav-container.
<div id="top-nav-container"
style="
display:block;
top:0px;
position:fixed;
width:100%; height:5.2rem;
">
<a style="background-image:url(logotest_big.jpg);
background-size:20%;
display:block;
width:500px;
height:200px;
"></a>
</div>
I got this problem too when creating fixed action bar with div using background-image as icon. But when I add Text in that action bar, that background-image become crisp. So I just add as replacement for Text if I don't want any Text on my action bar.
Sorry for my bad English :D
Instead of user-scalable=no change it to user-scalable=0
try this:
img {
transform: scale(1) rotate(0) translate3d(0,0,0);
}
<div style="position:fixed;"><img/></div>
<div style="position:fixed;"></div><!--add it-->
add a "fixed" element follow the "fixed", just like up.
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'm having an issue with the stock Android browser on a page I'm building. Simply put, the page won't scroll vertically without zooming in first. I thought I had it figured out when I caught that the tag was reporting a smaller height than the browser window, but fixing that did not cure the scrolling issue. (The black box on the index page reports the calculated height of the element.)
My test device is a Droid Incredible running Android 2.3. Scrolling works in Firefox for Android, as well as my Android 4.0 tablet and all iOS devices.
My dev build of the site is here: www.adamjdesigns.info/csu/engage
EDIT - Other code I've tried:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
if(navigator.userAgent.match(/Android 2/) && $(window).height() < 600) {
$('html').css({'height':$(window).height(),'overflow':'auto'});
}
Any help is greatly appreciated!
Though it's a hack, I have another fix that might help developers. I found that with the stock Android 2.3.4 browser, if one increases the initial page load size up from "1" to a slightly increased size, vertical scrolling works without having to pinch zoom first. For example:
<meta name="viewport" content="width=device-width, initial-scale=1.02" />
I figured it out! There was an iframe for a YouTube video in the page, and I'm not sure if it's the iframe itself or the related scripting to play the video inside it, but removing that from the DOM solved the issue. (I had it set to hidden on mobile screens anyway.)
Thanks for your help, everyone!
FWIW, I was having a similar problem with my webpage not scrolling in Android 2.3. I used Gatsby's answer with some conditional Javascript to fixed the problem. Here is my final code:
<meta name="viewport" content="width=device-width, initial-scale=1.00"/>
<script type="text/javascript">
window.onload=function(){
var ua = navigator.userAgent;
if(ua.indexOf("Android")>=0){
var androidversion=parseFloat(ua.slice(ua.indexOf("Android")+8));
if(androidversion<=2.3){
document.getElementsByName("viewport")[0].setAttribute("content","width=device-width, initial-scale=1.02");
}
}
};
</script>
This solution first sets the normal meta viewport tag which works great with most devices, then uses conditional javascript to detect the android version and change the meta tag content to the "hacked" value (provided by Gatsby) that allows for scrolling on Android <= 2.3. This prevents the unnecessary horizontal scrolling for devices that don't need the hack.
What i found to be the problem was I had added overflow-x: hidden; to my body tag. This should turn off the horizontal scroll bar, but instead in Android it turns off the vertical scroller. And in Android, I can scroll horizontally only. Probably a bug in Android browser. I am using old android phones (HTC Thunderbolt). I went through my css file and removed all overflow-x:hidden and now I can scroll vertically again.
Try this for your viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">