I am trying to make my mobile website in to a webapp.
I configured the webapp settings:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no">
Overmore, I am using Bootstrap and have a navigation fixed at the top, so it scrolls with the user on mobile. I added a padding-top: 20px; to this navigation bar.
If I then open the website, that works. But saving it as a webapp uses the correct status bar, but the top padding has disappeared.
I found this question where some answers go into the problems currently on iOS 8.1 / 8.2. But I did not found an answer to my problem.
Does anyone have an idea how this is caused and can be fixed? Thank you!
I had the same issue and ended up injecting the margins via jQuery. e.g.
$("#my-div").css('margin-top', '60px');
Also, when my changes to the viewport meta tags weren't showing up I deleted the webapp icon and then went to the site and placed it again with a different name; my changes showed up and it refreshed normally from there.
Hope that helps.
Related
My site used to work in full screen when I created a Web App for it, however lately it doesn't show in full screen anymore. Is there something that has changed with the new iOS version or a new Safari version?
I still have the meta tag : <meta name="apple-mobile-web-app-capable" content="yes">
Just to confirm, I am refreshing the website and adding the bookmark to the home screen. I can't seem to figure out what has changed.
Thanks
RF
This is a subject that gives us a lot of problems whenever IOS is updated. So now iOS 9 is here we have once again been searching for answers. I am happy to say we have found a fix and it may well work for you too.
For iOS 8 we found that adding the following meta tag
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimal-ui">
... and scrolling the page about a bit and back to the top using JS would do the trick - which no longer works with iOS9
window.scrollTo(0, 1);
window.scrollTo(0, 200);
setTimeout(function() {
window.scrollTo(0, 1);
}, 100);
But, what we have now found is that changing the meta tag slightly has once again rectified the problem (notice the scale):
<meta name="viewport" content="width=device-width,initial-scale=1.01,minimal-ui">
I am developing a mobile web site using Sencha Touch. In iOS7 Safari I cannot make the top address bar & the toolbar below go away. Sencha used to handle this upto iOS6 but some recent changes in iOS7 is causing this issue.
http://java.dzone.com/articles/safari-ios-7-and-html5
I read the above link & it seems this is also an issue for HTML5 Games & a few other apps.
The old window.scrollTo() which worked for iOS6 no longer works.
Add minimal-ui in your meta tag viewport, this will hide he address bar and browser controls in safari iOS7:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
More info on iOS7 and fullscreen mode for mobile websites: http://blog.initlabs.com/post/81716286465/how-to-display-websites-in-fullscreen-mode-in-ios7
With iOS 7 I don't think you really have a choice. Obviously Apple doesn't want developers doing this anymore, and even if someone finds another workaround it probably won't stick around for that long.
Honestly, I think getting fullscreen functionality is a fair trade off for users to install the app to their home screen. Obviously there are certain cases where this isn't true, but I guess I find it understandable to some degree. You should still be able to add the following meta tag and it will be fullscreen once added to home screen:
<meta name="apple-mobile-web-app-capable" content="yes">
There are a few nice libraries out there that add an "add to homescreen" prompt that you can set up to be rather unobtrusive with custom messages. In this case, might be best to embrace the change...
I have a Phonegap App which uses jQueryMobile 1.3.2 and Phonegap 3.1 (with the status bar plugin).
Everything works fine but the iPad Retina simulator (iOS 7) shows my screen cut off at the right hand side of the screen (iPhone Retina is fine, as are all Android layouts).
I'm using:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" >
...and tried with both EnableViewportScale true/false - whereas it has no effect besides the Retina 64bit - where a true will completely distort the view (I only see a green/white block), and also:
html, body { width: 100%; margin: 0; padding: 0; }
in my html pages. I have read through a few issues that iOS will return a different resolution value when "being retina", but never found anything in regards to fixing this related to phonegap.
The strange thing is, when I put set e.g. width=400 in the viewport meta tag, nothing changes... again, independent from the EnableViewportScale setting.
Thanks in advance for any clues...
Try This -
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, width=device-width" />
The main issue was the StatusBar plugin I used, which caused the weird layout. After removing it, the layout was fine again.
As to the status bar - I don't really need to control it during the app so I did the following:
Open the plist file (Resources/{ProjectName}-Info.plist) and add the key "View controller-based status bar appearance", set it to "NO". Also create the key / make sure that "Status bar is initially hidden" is set to "YES".
I have a phonegap app that uses both AngularJS and jQuery Mobile.
I've noticed, that under ios, sometimes I get white flashes on page transitions - those are done using JQM's changePage.
I do have a fixed header and footer, which, by google, could be the source of the problem.
However, all results indicate that this was an issues that's already fixed in JQM, though it is still occuring in my app, which is running JQM 1.3.1.
Any ideas how to fix this?
Thanks!
EDIT:
I also tried adding user-scalable=no, disabling zooming and dropping data-position="fixed" from header and footer. None of these helped.
< meta name="viewport" content="width=device-width, initial-scale=1" />
to
< meta name="viewport" content="width=device-width, user-scalable=no" />
OR add this css
div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari /
-moz-backface-visibility:hidden; / Firefox */
}
.ui-page {
-webkit-backface-visibility: hidden;
}
if this not works then check https://github.com/jquery/jquery-mobile/issues/4024
If anyone still stumbles with this, I found this post:
how to speed up changepage in jquery mobile for phonegap app
Even though it's not entirely related, the first answer (without the js code, though it might work with it as well) solved my issue, and improved rendering in android devices as well.
I am using CSS media queries to create a web site with responsive design. When I open my test page on the iPad in either landscape or in portrait orientation, it looks fine.
However, when I switch from landscape to portrait mode, the page is shifted to the left. I can tell that the correct CSS is loading because other things on the page change. I can also drag the page to the right and it appears exactly as it does if I had opened the page in portrait initially.
I have my viewport set to:
meta id="view" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
I added JavaScript to fix the iOS viewport scaling bug which used to cause the page to be zoomed in when switching from portrait to landscape. (I used the solution described here: https://gist.github.com/901295 )
I'm having problems finding the name for the bug I'm experiencing when switching from landscape to portrait. Has anyone else seen this or know how to fix?
The problem owner says that she "can also drag the page to the right and it appears exactly as it does if I had opened the page in portrait initially."
This makes me think that, for some unknown reason (a bug?), the page is scrolled to the left at an orientation change to portrait mode (otherwise you wouldn't be able to drag it back).
I had a similar issue and solved it with the following JavaScript workaround:
// ...
// Optionally add a conditional here to check whether we are in Mobile Safari.
// ...
window.addEventListener('orientationchange', function() {
if (window.orientation == 0 || window.orientation == 180) {
// Reset scroll position if in portrait mode.
window.scrollTo(0, 0);
}
}, false);
Maybe this will work for others too.
I managed to sort my similar issue out - perhaps this will work for you?
You'll need to work out if it's a particular div or other element that's causing it by deleting/reinstating different bits and retesting the page. Once you've worked it out try adding an overflow: hidden property to that element in your CSS - I used overflow-x: hiddensince my issue was horizontal scrolling but you may need to vary it.
Hope this is of use... good luck!
Jereon, your JavaScript worked for me. My viewport is:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
I'm using the Drupal Corporate Clean responsive theme. I have not had this problem using the Omega responsive theme framework.
The solution for this is as proposed by #ellawson
Problem is caused by some element not being scaled correctly by the browser when rotating the device. Find that element and apply overflow: hidden; or overflow-x: hidden; as he says.
Note: this question is a duplicate. I'll post the gist of my answer here.
2015 update
All the other answers are unfortunately incorrect, outdated, or misguided. Here's what works:
window.addEventListener('orientationchange', function () {
var originalBodyStyle = getComputedStyle(document.body).getPropertyValue('display');
document.body.style.display='none';
setTimeout(function () {
document.body.style.display = originalBodyStyle;
}, 10);
});
The code listens to the orientationchange event and forced a re-flow of the body element by hiding it and showing it 10 miliseconds later. It does not depend on any <meta> tags or media queries.
You said,
When I open my test page on the iPad in either landscape or in portrait orientation, it looks fine. However, when I switch from landscape to portrait mode, the page is shifted to the left
That is key. You just need to force a re-paint of the body.
Answers that suggest adding <meta name="viewport" content="width=device-width, initial-scale=1.0"> or variations thereof, as of Safari 7, no longer wors. Here's a demo. To make sure you see how it doesn't work, start with the iPad in landscape mode, load the page, then rotate. Notice the page doesn't expand to full height, despite using flexbox all the way.
Compare that to this page, where we use the hide/show body technique in production.
I came across this problem with an iPad and applied html { overflow-x:hidden; } . That seems to have resolved the issue.
try adding the following setting to your content properties: maximum-scale=1
or try this: user-scalable=no
here is the ios documentation