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.
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 developed an app with WebView. I thought I got everything to display to full device width until we tested it in a Nexus 5 running KitKat. At first I couldn't get the page to shrink on any device and fit without scrolling until I implemented the following:
<meta name="viewport" content="target-densitydpi=device-dpi, width=400px">
Target-density is the only thing that had an effect on changing the display size that I could find. And it worked... until Nexus 5 with KitKat. When displayed in the Nexus 5 it does the opposite now, it shrinks and I can't figure out how to display it to full width. I started looking again and found:
Viewport target-densitydpi no longer supported
Previously, WebView supported a viewport property called
target-densitydpi to help web pages specify their intended screen
density. This property is no longer supported and you should migrate
to using standard solutions with images and CSS as discussed in
Pixel-Perfect UI in the WebView.
Source: http://developer.android.com/guide/webapps/migrating.html
When I use this:
<meta name="viewport" content="width=device-width">
It displays too big again with scrolling bars and all the other devices would do the same thing.
I've found solutions (can't remember them anymore) that would work with Chrome and other browsers but not with WebView. Webview seems quite strict.
Any ideas how this can be remedied?
Try to add viewport meta tag in this manner. Hope it works for you in all the browsers.
I've made an app with one layer per page and a swipe functionality to switch between them (like Android Homescreen) and it works great on my desktop-pc with Google Chrome. The major problem is, that the swipe-functionality has so serious lag issues, that it sometimes takes 5 or more seconds to redraw the stage at the desired point. Also, while starting the web-application, it causes some browsers (Dolphin on my HTC One X) to crash and on the others ones it takes ages to load. The weird thing about this is, that the laggy behaviour really gets better, when the device is held in landscape mode.
This issue hassles me quite a lot, so I would be super happy if someone of you could take a sneak peek at my work.
An extra question regarding this setup is the following: Can I make a layer or shape static, that it doesn't get dragged around with the draggable stage?
Thanks in advance,
I have finally figured out how to solve my problem!!! :D
As Eric stated something about "viewport" I went for a walk around the internet and found out, that the initial resolution which was taken to calculate the stage size was much higher (960px width instead of the 700andsomething) than the actual resolution of the iPad etc., so I set the initial viewport with this little code snippet
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
at the actual device resolution and my performance problems were gone.
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 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.