I'm currently writing a Javascript plugin that needs to display an accordion notification (the sort that slide down from the top of the screen).
It works beautifully on desktop browsers simply with this css on the modals and accordions.
position: fixed;
top: 0;
left: 0;
width: 100%;
Unfortunately, that doesn't work so well on mobile browsers like Android and iOS. The default behaviour on my Galaxy S2 with Android 4 ICS is that the fixed position elements position in the correct place, and size to 100% screen width. Unfortunately, as soon as you pinch zoom and change the scale of the page, the browser doesn't seem to recalculate the 100% width and the element goes off-screen. Panning the content doesn't pan the fixed elements.
I found iScroll, a Javascript plugin which looks to do exactly what I want - except it needs the source of the main content of the page to be changed in order to work. My plug in has to work on any site and so unfortunately this isn't an option.
Does anyone have any ideas?
Try adding
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
to your head which should stop the mobile browser from resizing the content.
Related
I have a HTML5 App, which is in a container with absolute position and 100% height of the body and therefore is not scrollable.
I want to hide the browser bar in Chrome browser on Android, to get more space on the screen. So, actually I am looking for an equivalent for the IOS meta tag
<meta name="viewport" minimal-ui">
My idea was to add some pixels to the container's height
height: calc(100% + 50px);
and then use
window.scrollTo(0,50);
to make the address bar disappear, but what happens, is that it scrolls to the right position, but the address bar doesn't go away.
Does anybody have an idea how to do this?
I am testing on Android 4.1/4.4 and Chrome 39.
I've been struggling with this issue for over a week now and would really appreciate any help I can get. I'll explain the issue as I understand it but please correct if I say anything incorrect.
In iOS 7.0.x, when the keyboard became revealed, the web view was resized so that the area that the keyboard took was not considered part of the viewport window size. Up until 7.0, the Cordova Keyboard plugin handled this web view resizing. Since 7.0 natively handled the keyboard reveal in the desired way, the Keyboard shrinkView option for the config.xml file became a "No-op" as of this commit:
https://github.com/apache/cordova-plugins/commit/20215013bf91b659b73d5f428ae91dd58be1273a
However, in 7.1, the area the keyboard occupies comes up over the web view. This has a painful side-effect. Say you want to prepend a <div> to the body with a textarea area (like leaving a comment or chat reply), ie;
<body>
<div id="app">...</div>
<div id="reply">
<textarea></textarea>
</div>
</body>
example CSS:
body {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: hidden;
}
#reply {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Whenever you focus or input into the textarea, the web view will natively re-center the input field. Since the web view still takes the entire height of the screen into account, the div will not stay fixed to the bottom and thus breaks the layout.
I've tried the following things:
Futzing with the CSS for the body and fixed div. Position fixed/absolute doesn't seem to make a difference. Setting an explicit height to the body does nothing.
All possible combinations of meta viewport options. This is what I'm currently using:
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, minimal-ui" />
Uncommenting the "No-op" in the cordova keyboard plugin. This still breaks the layout as it did in iOS 7.0.x.
Having JS event listeners on the input and focus events to keep calculating the bottom offset to keep the div at the bottom. This is very jumpy because its battling the native web view behavior of centering the input field.
Altering the meta tag to set an explicit height after the keyboard is shown/hidden.
I'm using Cordova 3.4.0-0.1.3
Has anyone else experienced this issue? Any solutions or ideas?
A quick fix for me involved forcing the window to scroll back into position when the input looses focus:
$("input").on('blur',function(){
//set brief timeout to let window catch up
setTimout(function(){
//reposition at top left corner of screen
window.scrollTo(0,0);
},20);
});
Hope that helps!
It looks like Ionic has a multipart solution to this problem which includes dynamically updating the meta viewport tag depending on the device and also by hooking into the keyboard hide/show event and then using their scrolling framework to scroll the input into view.
More info here..
http://ionicframework.com/blog/ionic-keyboard/
This requires you to use their framework so I'm in the process of porting this over to JQuery and IScroll and I'll keep you updated on my progress.
I also posted my experiences with the phonegap keyboard on the phonegap forum but have not had much response yet.
https://groups.google.com/forum/#!topic/phonegap/LE9-lIsNT2c
I am experiencing somewhat similar issue. I have a cordova 3.3.0 app in combination with Sencha Touch.
The problem I was facing before iOS 7.0 was that the title bar went beyond the top of screen when the keyboard came up. The keyboard simply used to push the whole viewport up. After a lot of search and hard work, I was able to partially fix the issue by implementing a counter animation to move the title bar down while the keyboard was rising, using the focus and blur events of the textfield.
iOS 7.0 came as a happy surprise as it fixed this issue natively. I commented out my fix (fortunately, did not delete) and the title bar remained fixed at the top without any extra effort.
It seems iOS 7.1 has reverted that fix (wonder why??). When I updated to iOS 7.1, the title bar issue returned and I have now no choice but to uncomment the clumsy fix. Can anybody give some better or permanent solution to fix this problem?
Does this solve your issue?
Check your html meta tags for something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
Replace it with this:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
I'm trying to produce a mobile version of my website, but have encountered one problem:
The the whole website fits properly on the computer (with an example browser width of 480px) but leaves space on the right when viewing on my mobile phone (regardless of the browser I used). So the whole site looks good, but you can scroll "out of the website".
I first tried to disable horizontally scrolling, so I included this line:
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
To disable the (still scrollable!) space on the right I added this to my "mobile.css":
It worked on the computer, but not on my mobile.
body{
width: 100%;
overflow-x: hidden;
}
My website is avaiable here: my mobile website
My mobile.css file is located here: my "mobile.css"
I have tested the website on following mobile browsers:
Google Chrome
Dolphin
The default android browser
I originally wanted to avoid Javascript, but if there is a javascript solution, please don't hesitate to post it!
If you want your layout to be mobile friendly, it's best to be thinking about this right from the beginning. So, for example, if you are going to set fixed widths on elements (which I don't recommend), such as—
#back-menu-left {with: 500px;}
you need to ask yourself what will happen to this on a small screen. So, either don't set that width, or immediately write an #media rule to override it on smaller screens.
(I didn't check through the rest of your code, just stopping when I found one oversized element. Best to check and see if there are any other overwide elements like that.)
My application generates HTML email templates. They are between 600px and 650px wide usually, but sometimes they go up to 900px. The templates are nested pretty deep (lots of table elements for email clients), and sadly all the widths/heights are hard-coded in px, not relative dimensions. This has been ok until now, because my users view them in a browser. But now I am building a mobile app.
I am trying to display these templates in a webview inside various mobile clients (iPhone, Android, iPad, etc). Is there a way to 'scale' or fit these templates so they stretch to fill up the entire width of the window?
I tried tweaking the meta tag;
<meta name="viewport" content="width=device-width, initial-scale=1.0>
Unfortunately I don't know the width of the template beforehand so I have to either set the meta tag too wide or too small, and then templates either have white borders or end up overlapping the window. What else can I try?
I ended up using CSS3's
transform: scale(ratio);
position: absolute;
top: 5px; left: 5px;
after dynamically calculating the scale ratio to take into account the 5px margin. Turns out
minimum-scale=0.1
was necessary for an older Android phone to display the re-sized view correctly.
I am working on mobile compatibility of a site for my third party product, and I am facing position fixed issue.I am fixing a footer to viewport's bottom.Android below 2.3 & iOS devices below 5 do not support position fixed.
For such devices currently I have fix that I am calculation current width of viewport and then apply width to footer by js.
But problem occurs when there is less content on site or client's site add auto zoom meta in head.In this case screen is zoomed and content inside of footer breaks.
I can't use iScroll because it locks zoom functionality , and I can't mess with client's page.
Please suggest me some logical solution to this problem.
Wrote custom function , which people used to use in ancient times (IE6 times).
It checks if browser supports position fixed or not.If not then adjusts its position according to scroll/zoom.
Try using
<meta name="viewport" content="width=device-width, initial-scale=1">
so the zooming does not occur at the page load - but it's still available to the user!