I am developing a mobile version of my website which I am testing on my Samsung Galaxy S android mobile device running Froyo (2.2).
I would like to , when viewed with the standard internet browser, have a fixed header and a fixed footer ( which are always visible on screen) with the contents of the pages scrollable in between.
I tried all sorts of combinations with padding of body and the sorts (which seem to work when viewed on a browser on the pc), but can't seem to find a solution.
Can anybody help here ?
Note: if I try something like this :
<div id="header" style="position:absolute; top:0px; left:0px;height:200px;overflow:hidden;"></div>
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px;overflow:auto;"></div>
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px;overflow:hidden;"></div>
Both the header and footer are fixed but the content is not scrollable , e.g. it also appears fixed .
It might be the browser of the Android Froyo 2.2 of course.
Anyone ?
It seems that position:fixed is only partially supported in Android 2.2+, if you also add a particular meta tag. You should also note it's not supported at all under iOS. There are scripts to emulate the behavior, though(which I don't have right at hand.)
The following site explains the state of this issue.
http://bradfrostweb.com/blog/mobile/fixed-position/
The author suggests a few JavaScript solutions.
iScroll 4
Scrollability
Sencha Touch
Jquery Mobile
Since you probably only want to build this a single time and would like to support multiple mobile devices transparently, I would suggest you take a look at : JQuery Mobile
Article on page layout
If you are already working with minimal screen space, why would you want a fixed header and footer? Consider that every browser window may not be big enough for it to be practical. What happens when someone views your page in landscape and you have both a fixed header and footer?
Even on the Nexus S, at 800x480, at 100% zoom you will take up half the page in headers and footers and that's in portrait. In landscape, forget about it...
Is there another design that could work well?
What is the use for the links? If they are very important it might make sense to just repeat them another way.
Related
I'm trying to create a simlpe responsive layout (JSFiddle) for a web app and struggle with the rendering on mobile webkit browsers.
They shrink some of the floating elements in a (to me) unpredictable way.
Layouts work well with desktop browsers and Firefox and Opera on Android but not with Chrome on Android and seemingly Safari on iOS (tested with Kitkat smartphone and simulated in Chrome for Android and Apple devices):Simulated Nexus 4 Rendering(Text in blue and orange areas should be as big as in the white area)
It seems it doesn't matter which exact CSS attributes I use; I tried CSS tables, boxes, floats, flex-boxes and lastly -webkit-boxes - all with the same result: Too small headers and footers
This is part of a project on Google Script, so unfortunately I am not in control of the viewport meta-tag, but a quick try with a local file and a <meta name="viewport" content="width=device-width, initial-scale=1"> tag didn't solve the issue either.
Has anyone experienced this before and has an idea how to fix it?
Thanks!
It seems this answer by moeffju is relevant to your problem:
Add max-height: 999999px; to the element you want to prevent font boosting on, or its parent.
https://stackoverflow.com/a/12965146/5297207
Using the Chrome emulator and adding this property to the P elements in the white area made the text adhere to the CSS font-size. (It makes the white text small like the blue and orange, not them big. The original sizing is small).
See the comments of the original answer I linked to for an explanation of why this works, and also some warnings about problems that might occur from using this fix. I've used it successfully on a couple of sites but didn't do very thourough testing on Safari.
We have a mobile web app built using JQuery Mobile, PhoneGap and ASP.net MVC.
The app is targeted to run on iOS and Android devices regardless of the browsers.
We have tested the app on devices listed below and it seems to work fine without any issues
iOS 5 - iPad , iPhone .
Android 4.1.2 - Google Nexus 7, Samsung Galaxy S3, Samsung Galaxy Note 2, Samsung Galaxy Tab 2.
Android 4.0.3 - Asus Transformer Tab
But when tested on Android Stock browser of Samsung Galaxy Note 800 with 4.1.2, we encountered a very strange issue. The elements placed in a div (say child div) with css attribute'overflow:auto' do not respond to any touch events while scroll is enabled. The main thing to note here is that the Parent div containing this div is absolutely positioned 'position:abolute'. After researching over the internet for sometime we found that the combination of absolute position and overflow attributes may cause some issues on Android browser.
Removing absolute position is not possible at the moment as it is resulting in complete redesign of the layouts and we are left with only few days for the release. So can any one suggest a quick fix for this?
Use overflow-x and/or overflow-y properties instead.
EG
overflow-y: scroll; /* allow vertical scrolling */
-webkit-overflow-scrolling: touch; /* optional momentum scrolling */
Also, since scrollbars are hidden on touch devices you can use :scroll rather than :auto. It will look the same but may not be subject to the same bugs.
I don't know why it worked, but adding -webkit-backface-visibility: hidden; to your style will fix it
Problem with overflow: auto is/was a known issue in Android browser.
There was an issue reported on that in 2009 (see here). I thought they had solved it in the meantime. It's marked obsolete. But people are still complaining it does not work. If it is so, I suspect they will not fix it anymore, as Chrome has become a standard Android browser now.
You can use the javascript library called "iScroll". It works with most of Android devices and is not difficult to implement.
Just write var scrollDiv = new iScroll('divId'); below the div element.
Here it is the project page: http://cubiq.org/iscroll-4
How about trying to put the elements inside the absolutely positioned container in a new div and position it relatively?
<div class="absolutelyPositionedParent">
<div class="relativelyPositionedElement"></div>
</div>
<style>.relativelyPositionedElement{position:relative;overflow:auto;}</style>
I have a website with the following configuration:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=5.0;minimum-scale=1.0;user-scalable=1;" />
and a div element with the
<div style="position:fixed;top:0;left:0;width:100%;height:40px;">Fixed Header Content</div>
(you can find the example here: http://massmatics.de/demo/test.html)
When watching this site on iOS and zooming, the size of this element increases but is getting out of the zoomed area.
When performing the same action on android (tested on a Nexus Tablet with Android 4.x) the fixed element disapears while zooming but when this action is finished it appears in a increased version on the zoomed area.
I think the behavior of chrome is right, but my question is now:
Is there a way to get the same behavior on android as on iOS?
The reason why I am asking is that I have a lot of content on the page which should be zoomed when viewed on a small device, but on Android the enlarged fixed element is taking all the space so zooming is not really a advantage.
Best regards
Update: I added a JS Implementation of the position:fixed to my example (with bad performance, I know, just for testing purposes.) - still the same behavior as with position:fixed. Is there an event whether the user zooms the page?
position:fixed support was just added last year in iOS5 - and from my experience, Android handles such elements inconsistently.
I believe the only predictable way to accomplish what you are trying to do is to wire it all up with JavaScript. Probably not the answer you were hoping for, but position:fixed is rarely the right solution on mobile anyway.
Android seems be to be increasing the clickable area of a submit button on an HTML form I'm working on. It's as if there's about 25 pixels to the right of the submit button that are also tap-able. This is problematic because, in my design, to the right of the submit button is an <A> element with an event handler bound to it. Tapping the <A> often submits the form instead of firing the event handler. I'm doing most of my testing in Browerstack and some on real hardware. The problem exhibits in (virtual) devices with lower screen widths (e.g. 320px), and seems to be there in Android 2.3 and 4. The same pages in iPhone (4s, iOS6) and Blackberry (v7) don't exhibit the problem.
Here's a CodePen example, and a single file version of the same code for easier viewing on mobile
Has anyone else seen this? Is it a feature? A bug - either in Android or in my code?
have you tried applying a reset.css to it? It seems to be an android webkit issue.
Also, try to use 40px areas for tap buttons.
I recommend using the reset.css stylesheet provided by meyerweb.com. It removes (almost) all styling that browsers would apply, but you may find you need to rework a lot of css and put a lot of stuff in such as <h1> tags.
CSS Tools: Reset CSS
I built a complex forms over data mobile application and am now looking for a solution to persist the position of the title and the footer bar. In my dummy, which has been developed and tested with Chrome and Safari on my desktop, I just positioned the header and the footer absolute, as well as the content section, which height is set by JavaScript on the windows' resize event.
That's not a proper way for the mobile world, because overflow:auto isn't supported on mobile WebKit.
I tried some things by my own and I took also a look at iScroll. In fact, iScroll crashed safari on my iPad while the application without that component runs quite smooth. I have a lot of relatively complex forms, which may be a challange for iScroll, which can't be won I think.
So I am looking for other ways to achieve my goal (persist header and footer) without letting the user use two fingers for scrolling (in fact, almost nobody knows that "trick").
Any suggestions?
Thanks!
So there are three commonly mentioned solutions:
iScroll
YUI ScrollView
Scrollability
They're all very neat for scrolling through simple lists. But no one really works if it's purpose is to handle full pages with more than just a list, for example complex dialogs with dynamic forms and so on.
I just decided to give up and wait a year - Apple has lately announced its support for position:fixed and overflow:scroll, which will revolutionize this part and solve all that kind of problems we have today.
Today I remembered a website of a company in our building here in Munich, opened it with the iPad, and indeed, it had a scrollable news section on its frontpage. So I looked inside and saw that it is using ... tadaaa ... jScrollPane.
I don't think jScrollPane was developed for using it on mobile devices, but it has been optimized for that purpose, too. It just works on my iPad, my Android 2.3 and also on the latest Opera Mobile.
It doesn't feel like scrolling a native app on a mobile device, but it allows you to see a fully customizable scrollbar, jump to top and to buttom and, what's most important, to scroll with one finger.
Very nice.
Mobile webkit now supports scrolling using only CSS. Create a class 'scrollable' and add the following rules:
.scrollable {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
Add your 'scrollable' class to any block element that requires scrolling. Webkit Only.
https://github.com/filamentgroup/Overthrow/
Lightweight polyfill based solution that let's modern browsers with overflow:scroll support do their thing.
Still in early phase of development, but works pretty well on the largest affected user base (android 2.2/2.3/iOS<5).