I am having problems with the auto resize feature of the android browser. The widths on my site are going a bit haywire when the device is in portrait mode.
What I would like to do is
Have the same version of the site for both desktop and mobile users.
Allow the user to zoom in and out as they please.
I currently have the following in my head
<meta name="viewport" content="width=1100">
I found the following blog post which describes my problem.
This is definitely caused by the auto-fit layout
("kLayoutFitColumnToScreen" in the Android WebKit source code). Just
try the test with auto-fit disabled and everything is rendered
correctly (at least on my Android device).
The auto-fit mode on Android seems to shrink certain elements' width
without affecting their positioning, or the positioning of other
elements. So if you have a containing block with width: 1000px and
text that spans 100% of that width, the container may remain 1000px
wide but the text inside it will wrap at the screen width.
http://www.quirksmode.org/blog/archives/2009/09/css_width_unrel.html
Is there a way to stop this autofit mode from kicking in? I don't want to disable zooming.
Update:
I am still searching for a solution if anyone knows of one.
Have found someone with the same problem (although they are using tables)
Spanned columns collapsing on Android web-browser (when using auto-fit pages)
http://code.google.com/p/android/issues/detail?id=22447&can=4&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars
I have been experiencing this problem and found a solution that works for me.
I have one main <div> with some nested <div> elements inside. The HTML is very basic. I found that one <div> within my main <div> would wrap its text as if I had double-tapped the text to zoom in on it. This <div> only contained text. This behavior occurred only in portrait orientation, and it corrected after double-tapping or switching orientation.
Since this problem is an Android bug, no CSS or HTML can really fix it. However, the following CSS resolved the problem satisfactorily for me; and I didn't have to turn off "Auto-fit pages":
I added a CSS background-image to the <div>. I just used a transparent, one-pixel PNG as the background.
div { background-image: url(../img/blank.png); }
Just furthering the answers above which worked for me with an important caveat: the redraw time in IE8 makes the 1x1 transparent pixel method unusable on that target on a decent size canvas.
Since CSS can't detect auto-fit, or android browsers (chrome on Android seems fine anyway), my workaround was to
target smaller devices (since IE8 tends to be desktop), and
only target the relevant 'p' tags (autofit only targets some 'p' tags), so if we apply this fix only where it is needed then we keep the redraw performance impact as low as possible.
My workaround (based on Demetic's answer above):
/* work around mobile device auto-fitting */
#media only screen and (max-device-width: 800px) {
#content p {
background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
background-repeat:repeat;
}
}
On my website '#content' is where the 'p' tags reside that are being auto-fitted, naturally you'd need to change this. 'body' will work, yes, but the more specific the lower the impact on redraw time.
It may be worth adding in a portrait-only detection mode since auto-fit doesn't seem to be targeted at landscape - but I haven't tested it on enough devices to confirm that this is always true.
I just wanted to confirm that Delbert's solution was the only thing that worked for me. It's not completely apparent as to why this works, but it works. I've done some fairly exhaustive searching on the issue, and the links from Tom's original post seems to include about all there is out there.
For what it's worth, I tried some fairly aggressive attempts at correcting the width of some <p> tags nested deeply within a chain of <div> tags using some of the proposed solutions here:
* { background-color: transparent; } did not work for me.
However, * { background-image: url("/image/pixel.png"); DID work for me (where pixel.png is a 1x1 transparent PNG). I eventually relaxed this to apply only to my nested <p> tags, and found that my paragraphs were finally spanning the intended, correct width.
I also confirmed that the behavior is a result of the "Auto-fit web pages" setting. I do not own an Android, but experienced these issues using the emulator.
Thanks again to Delbert for the tip.
Same problem here. The content within my <p> tags is smushed to left side. No good solution found yet though I've found that if I add a background color to my <p> tag it "fixes" the issue. I'm still trying to find a real fix though since adding a background color is not ideal.
*{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}
Yes it seems that Android 4.x is in cause. Really annoying because it is the default behaviour !
It completely destroy all my websites...
I didn't found any solution at the moment.
The proper behaviour is to fit the text with the width of your screen when you double tap the area. It seems that this feature is active even when not zoomed.
I simply add a transparent png image as a repeated background. This also works for H1, H2, H3... tags that seem to be plagued by the same narrow-column problem. By using a transparent png, it allows me to still assign a background color or show whatever is behind the element. This is not perfect, but it is the simplest solution I have found that does not rely on any browser-specific hack and seems to work well in all other mobile browsers I have seen.
Although, I have noticed the same behavior on SPAN tags as well, and the above does not seem to work for this element... weird!
give Width in % instead of px, like width:100%;
I have nearly the same problem with p tags and li's they are much smaller then the surrounding container, but only with Android 4.x. With Android 2.3.x and Android 3.x "auto-fit pages" has no negative side effect.
Seems they tried to improve something, but it worked better before, that's annoying.
This appears to be a programming issue with Android. But in your mobile browser under Settings=>Advanced uncheck Auto-fit pages and this can be resolved. But we may not want our users to abide. So for the time being a simple hack as to placing a transparent background image should not be ruled out as a temporary solution. Using Drupal as a framework and Omega as my responsive theme and knowing my layout regions and outer DIVs are set to {display:block width:100%} this drove me nuts for a few minutes. But the transparent image worked nicely.
I set a min-width and a width on the td where my email content lives and is now working fine in Android's gmail app where versions use autofit mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gmail Issue</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="50%" valign="top"></td>
<td width="1100" valign="top" style="min-width:1100px;"></td>
<td width="50%" valign="top"></td>
</tr>
</table>
</body>
</html>
One thing is for sure, the auto-fit 'feature' is causing a lot of gray hair for developers.
I solved the issue by inserting a transparent image, 1 pixel tall and 650 pixels wide (the width of my email) at the very top of my email.
Even with auto-fit enabled my email now renders as it's supposed to.
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px">
<!-- HERE'S THE MAGIC -->
<table width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="1">
<img src="spacer.png" width="650" height="1" style="width:650px; height:1px;" />
</td>
</tr>
</table>
<!-- END THE MAGIC -->
<!-- Start Wrapper-->
<table width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
<td >
REST OF EMAIL HERE
</td>
</tr>
</table>
<!-- End Wrapper-->
</td>
</td>
</table>
By adding a background image to your css, auto-fit will be disabled.
Other posters have suggested adding a single pixel transparent background, but you can actually just add an empty background image to the top of your css stylesheet and skip the additional http request and redraw.
div, p {
background-image: url();
}
I have tested it in my emulator and my Galaxy SII and it seems to work the same as adding an actual url.
Related
This code works exactly as expected in every desktop browser (Chrome, Edge, Firefox, Safari) and also in Firefox on Android. I don't have an iOS device to test with - I'd be curious to know what happens on an iPhone.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Background</title>
<style>
html {
height:100%;
background:linear-gradient(red, blue) no-repeat fixed;
}
.wrapper {
min-width:590px;
padding:20px;
}
.box {
height:250px;
width:550px;
background-color:green;
}
</style>
</head>
<body>
<div class='wrapper'><div class='box'></div></div>
<div class='wrapper'><div class='box'></div></div>
<div class='wrapper'><div class='box'></div></div>
</body>
</html>
Live demo: https://misterneutron.com/lgtest/
The "no-repeat" attribute isn't even necessary, but just makes this demo even more clear. In short, it provides a red-to-blue linear gradient background that fills the viewport, and stays put if you have to scroll vertically or horizontally to see all of the green boxes. Firefox on Android flickers a bit, but gets the correct result. But in Chrome on Android, the background linear gradient scrolls with the content, leaving a white background. Without the "no-repeat" attribute, it actually repeats the background, apparently ignoring the "fixed" attribute.
Not surprisingly, the same thing happens with a background image (https://misterneutron.com/bgtest/). Same page code, but replace the html styling with:
html {
height:100%;
background: url('aspectWide.jpg') no-repeat fixed center center;
background-size: cover;
}
I've tried all types of alternates - 100-percenting things like height and width on html and body, putting the background on the body rather than the html, and so on. Nothing seems to change the behavior. Does anyone know how to beat this browser bug, or do I just have to wait for some future release? I could do some browser-sniffing and eliminate the background if it's Chrome on Android, but ugh.
There are threads about similar issues, but most are several years old, and address much older browser versions. And not one of the suggested workarounds has succeeded.
Edit: Another data point. The problem is much less severe with a repeating background: https://misterneutron.com/bgtest2/. But the "fixed" attribute is still being ignored. Much easier to live with than the original problem, however!
HTML email. Everyone's first and last love.
I've built an table-based email that has a background image with text overlay as a 'hero' module. I used a background image on a div w/ inline CSS. Works great everywhere except Outlook 2010/2013, and Android Gmail native app.
Did android gmail app stop supporting background images?
Even this didn't work... bulletproof sample(backgrounds.cm) to illustrate and litmus says no go on outlook and android gmail app.
<table>
<tr>
<td background="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNR9_Ru7wFZQLYHFXkeobjz0VoSFcC6-ieN7yWBa0dsnHhvZ8-IPSmpKw" bgcolor="#7bceeb" width="580" height="240" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:580px;height:240px;">
<v:fill type="fill" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNR9_Ru7wFZQLYHFXkeobjz0VoSFcC6-ieN7yWBa0dsnHhvZ8-IPSmpKw" color="#7bceeb" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
Please work, please, darn it
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Good question. There's a lot of conflicting information about this topic.
For instance, this link suggests to inline all CSS, whereas this link suggests to embed all styles in the head. And even further - if this link is correct, Gmail's e-mail preprocessor strips sketchy-looking CSS from the email body altogether:
Gmail doesn't allow backgrounds (mostly). If you include any reference to a URL, your entire declaration will be ignored. For example:
background: #000; /*This will be accepted */
background: #000 url(http://www.test.com/test.jpg); /* This entire line will be ignored */
Anyway, I had a similar issue involving a background image not working on a <table> element, which I resolved* by way of adding a class to my table ...
<table class="table">
... with an accompanying stylesheet declaration:
<style>
.table {
background-image: url(https://www.example.com/image.jpg/);
}
</style>
I also added duplicate references to the image both via the background-image CSS property, and the background HTML attribute (because god knows what the Gmail preprocessor is doing).
<table class="table" background="https://www.example.com/image.jpg/" style="background-image: url(https://www.example.com/image.jpg/);">
*This won't work for Outlook, as Outlook doesn't support background images at all.
A couple of other ideas for your case: make sure the link is actually up and make sure the server is correctly configured to externally serve whatever kind of image this is supposed to serve up.
If all else fails, maybe you could try using a URL which resolves directly to an image. Gmail might strip all of that out it it makes the determination that it looks too sketchy.
I have the following html:
<div class="product-view row" data-id="505019">
<a href="http://dev.shopious.com/items/505019/Kode--A032Bahan--spandex-korea-HQUkuran--fit-to-LRp69000">
<img class="img-responsive" src="http://distilleryimage4.s3.amazonaws.com/6f1400c6a9cc11e3b5a512abfd23a3f4_6.jpg" data-src="http://distilleryimage4.s3.amazonaws.com/6f1400c6a9cc11e3b5a512abfd23a3f4_6.jpg" width="100%" height="100%">
</a>
</div>
</div>
I wanted essentially the image to adjust according to the width and height of the container. So I've set width="100%" and height="100%".
This works all fine on most major browsers such as chrome, firefox, opera, and even opera mini.
However when I tried this on an android browser, it messes up. Why is this? Here is the link to my website here.
use style="width:100%; height:100%;" instead.
in both cases make sure the parent element has constant size set, because 100% is supposed to be 100% of something. if parent element has no width, then 100% of nothing is still nothing.
major browsers have default user-agent styles, they can set parent size accordingly on their own therefore the 100% would work, im not sure if the mobile browser you tested it on has its user-agent styling, but you should always do it correctly and not rely on default styling.
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.
I developed an app in phonegap .
In input tag if i give type='text' it is works well .
but when i give input type='password' an another field is opening over to the current field.
how can i remove the above field..
my css is
.login-screen input.login {-webkit-border-radius:4px; width:90%; border:none; height:33px; -webkit-box-shadow: inset 0px 1px 2px 0px rgba(150, 150, 150, 0.9);
-moz-box-shadow: inset 0px 1px 2px 0px rgba(150, 150, 150, 0.9); box-shadow: inset 0px 1px 2px 0px rgba(150, 150, 150, 0.9); padding-left:10px; margin-bottom:10px;}
html
<td align="center"><input type="text" id="vEmail" name="vEmail" title="Enter Email" value="" alt="" class="login" /></td>
</tr>
<tr>
<td align="center" ><input type="password" id="vPassword" name="vPassword" title="Enter Password" value="" alt="" class="login"/></td>
</tr>
i hope u can understand more by seeing this image!
if i remove the i scroll its working fine... how can i make it work even though i scroll is used
Here is an easier solution!
Change
<input type="password" />
to
<input type="text" class="password-field" />
In your CSS style sheet(s).
input.password-field {
-webkit-text-security: disc;
}
http://css-infos.net/property/-webkit-text-security
I am building a PhoneGap (cordova) ANdroid app and i spent about 18 hours so far trying to find a fix, destroying the iScroll instance kind of works if the password field is on the screen and not below the scrolling area... The webkit text security CSS property is a much better fix and i've done some research on this CSS property and it seems like all the Android versions run webkit so you should be good to go for all versions of Android with this fix!
I've been able to avoid this be using android:windowSoftInputMode="adjustNothing". +Sandy09 is right about the overlay + position. It seems the only good way to avoid this is to prevent android from moving the contents on IME start (adjustNothing), and also be preventing the contents inside the webview from moving at all. This also seems to break all CSS3 3d/3d transforms, even simple scales and transform-origin can break it.
There is worse news tho: at some point i had password boxes working fine, then due to CSS changes it came back permanently. At some point if the browser is slowed down enough (canvas) the Window seems to lose its ability to track the input box. For us, this led to SIGSEGVs every time we pressed the 7 (seven) key on the IME. This was on ALL android devices too, Regardless of version.
I gave up on all of this and just made my own KeyboardView. I'm a little happier now.
Check out this fiddle for the Login/Register page....
Use password field like that as given in the fiddle
http://jsfiddle.net/elijahmanor/3Rmdm/1/
This is not the problem with Phonegap.. this issue is also occurs in the webview..
in many devices like (samsung, sony, and emulator etc) the password field is overlay with the another field and rest of fields works fine.
coming to HTC this issue will rises in the all type of fields..
normally this overlay field covers exact to the bottom field and looks like only one field.
but
when we use the iscroll to apply scrolling property, the ovelay misplace as in the above fig.
solution:
onfocus on the field disable the iscroll and onblur refreshing the iscroll is an temporal solution which works fine.
but this is not right solutions in all cases.
waiting and trying for better solution..