So I've only experienced this issue on the Android browser so far. Basically my site works fine almost all the time (and I've not seen the problem yet on Dolphin, Opera or Skyfire) but occasionally when I reopen the Android browser from a bookmark on one of my phone's homescreens my site appears stretched horizontally, so now I only see the first 2/3 of the left hand side. Its' as though the browser just lost the CSS or the meta information while it was minimized. Here are my meta tags, and I'm using width 100% in my table styles.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="Task, Tasks, Goal, Goals, Habit, Habits, Track, Tracking, Best Habit Tracker"/>
<meta name="description" content="Top Habit Tracker!"/>
<meta name="mobileoptimized" content="0"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
This issue only seems to happen when the bookmark is clicked after about 30 min. to reopen the stock Android browser. Then, it seems browser gets the page from its cache, but still runs window onload for ajax, so I'm thinking the combination of it using a browser-cached page with (maybe?) the javascript DOM manipulations from ajax on top is something that the Android stock browser uniquely has problems with, breaking my table width outside the viewport. Or maybe the DOM changes have nothing to do with it.
If the phone is switched off, then on, and the bookmarked clicked, the stock browser reloads the page from the server, then I don't get the problem. If the browser is minimized, and the bookmark re-clicked after just 2 minutes, no problem either because the browser just re-displays itself and the last page exactly as it was left, without doing anything.
I've been thinking of some kind of hack I could throw on top to force a reload from server in the case where the page is grabbed from brower cache, or I guesss I could try turning off browser caching, but I'm wondering about the implications of doing that on images, css, load time etc. Weighing up my options... thoughts welcome.
UPDATE: Well turning off browser caching may have reduced the incidence of this issue (not sure?) but definitely didn't cure it. I'm now thinking I may be having the same issue as described in this blog post:
http://www.gabrielweinberg.com/blog/2011/03/working-around-androids-screenwidth-bug.html
UPDATE: OK nothing I've tried so far has prevented this intermittent issue in my Android stock browser. I'm going to switch my regular use of my app to Dolphin for a while to see if the issue occurs in that browser. What I've tried so far is: using meta tags to disable browser caching (I think to some extent the Android browser ignores that anyway)... changing the table width (I may try that again in a different way)... Using the solution posted at comment 14 here (dynamically creating CSS link): https://code.google.com/p/android/issues/detail?id=11961#c14 and lastly I've tried appending Datetime ticks to the URL in an effort to alleviate caching, that hasn't worked either.
More useful info here: http://f055.tumblr.com/post/6364300769/viewport-bugs-in-android-browser
Not sure if this will help u - but this is what I did for my mobile apps
This is the only meta I use...
<meta content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
<div class=general>
All Ur Content in here etc - or next div etc...
Below the margin-left: 1% and margin-right: 1% formats your div to your width
So if ur browser is upright or wide - it is always 1% border width and fits screen.
Don't use any table width=800 or anything - control it with the 1% margins
</div>
.general {
font-family: Verdana; font-size: 10pt; font-weight: normal;
position: relative;
background-color: #fafafa;
padding: 8px;
margin-top: 4px;
margin-left: 1%;
margin-right: 1%;
border: 1px solid #000;
border-radius:5px;
}
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!
As you can see, the site is shrinked to the side in some mobile devices:
I'm not sure why. There's not width set in the body or the html tag:
body {
color: #444;
font-family: 'Helvetica Neue LT Std', sans-serif;
font-size: 16px;
}
html {
margin-top: 32px !important;
}
This is the viewport tag:
<meta name="viewport" content="width=device-width">
I don't see any thing strange there either. What could be the problem?
Live site: http://www.m2comm-semi.com/electronic-shelf-labels/
It could be a problem with your initial level of zoom. I recommend changing your meta line to -
<meta name = "viewport"
content = "width = device-width, initial-scale = 1.0"
>
This will force the browser to set your initial level of zoom to normal, i.e. 1x.
Please see What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag? for more information.
Unfortunately, depending on how else you have coded your file, this may not be much help. Alot of people have difficulty getting their page to display properly on an actual mobile device (as opposed to an emulated one). I am one of them. If I ever figure out a way around this problem, then I will post here accordingly (if no one else has already done so).
I wish to have a DIV element show up on my website only if the user is on a mobile device. This is for a small business website and I want to have a link that allows the end user to call the business direct from the web page - I don't need this DIV element to appear on the desktop version of the website.
I have achieved this using the following code:
#callus {display:none}
#media screen and (max-width: 900px) {
#callus { display:inline !important; }
}
.callnow {
position: fixed;
bottom: 0px;
left: 0px;
height: 100px;
width: 960px;
background-color: #f90;
}
However, upon testing, I have realised that modern mobile devices often have high resolutions that are in some cases equal to what might be considered a "normal" desktop resolution, therefore I am looking for a solution that simply looks for something like "If OS is Windows Phone, iOS or Android then show this element".
Is this possible?
You can detect for different features using modernizr http://modernizr.com/ for example detecting touch is useful, but it requires Javascript support.
Mobile devices despite having high resolution screens should still work with media queries. Make sure to have the below code in your header
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
this sets mobile devices to render the site correctly despite HiDPI
It's not possible with pure CSS Media Queries however you can add queries to address specific device - look here.
You can detect mobile browser (User Agent) with JavaScript and add some class to body - e.g. mobile-device and then in CSS .mobile-device #callus { display: inline; }. I found great solution here: https://stackoverflow.com/a/11381730/3589528
The problem only appears on KitKat with the new WebView mechanism.
Basically I am loading 12 images, one after another in a row. I want the WebView to load all images on a row and auto zoom the webView to fir the entire row.
How it works prior android 4.4
the images are loaded on the row and the zoom is made to fit the entire row. The user can scroll in and out
How it works on 4.4
the images are wrapped, so I have the first image drawn and the next one is under it, not to its right
The html loads images like this:
<meta name="viewport" content="width=device-width, height=device-height, minimum-scale=0.3, user-scalable=yes, initial-scale=1"/>
<style type="text/css">
body {margin: 0; padding: 0; border: 0; float: left; white-space: nowrap;}
.Image .Tile-0-0 {background: url(tiles/tile_0_0.png) no-repeat; width: 128px; height: 128px; float: left;}
.....
and then
<body>
<div class="Image">
<div class="tile-0-0"></div>
<div class="tile-1-0"></div>
.......<br/>
Any ideas? My guess is that somehow I need to tell webview to fit the entire row, not wrap on the device's width.
How could I fix this ?
Android 4.4 (KitKat) has a completely different WebView (based on Chromium source) than previous Android versions. There is a migration guide that describes common problems you might experience.
In your case the first thing I'd check is whether the HTML renders correctly in Chrome.
If it does, try setting targetSdk to 19 in your manifest (this disables some quirks) and see if that helps.
If it doesn't it might be a change in how CSS is interpreted/layout is performed between the two WebView implementations. Try fiddling with your CSS and see if that helps. Using DevTools should make it simpler.
Another thing to look at is the viewport - see if the document.documentElement.clientWidth differs between the two versions. If it does then that's the reason it looks differently. If you're using wrap_contents height try using match_parent/a fixed value.
I'm working on optimizing a website for mobile devices, and I'm nearly done (yay!) but one thing makes me rack my brain:
How it works
I used CSS to restyle a tab-bar (actually a list) to work like a dropdown-menu. When touching the only visible list element, jQuery toggles the class "open" on the ul-element and all list elements appear also. That's how it works.
The Problem
When unfolding the dropdown-menu, it's font-size increases from 15px to 19px. And in Inspector there is absolutely no hint why this happens. Adding a rule like font-size: 15px !important; has no effect.
I made a little screencast for you: http://youtu.be/MUTJfTK70PE?hd=1
Affected devices
Android (Samsung Galaxy)
iOS (iPod, iPhone, Simulator)
Windows Phone (Internet Explorer) is not affected (wow!)
I would be very thankful for every single idea!!
You may try adding something like this: font-size: 1.5rem;
It turned out, that Mobile Webkits font resizing was the origin.
This rule solved it:
-webkit-text-size-adjust: none;
In html5 this is best solved by explicitly setting the viewport in the page header. The statement
<meta name="viewport" content="width=device-width, initial-scale=1.0">
turns mobile font resizing off. Setting text-size-adjust to none has the disadvantage of disabling zoom on mobile devices, still requires heavy prefixing and the value none seems to be ignored by some browsers.