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".
Related
I built a website for myself which I believe is responsive as per my testing with Firefox's responsive mode. I tested all the pages with the iPhone resolution (375*667) both landscape and portrait mode and it worked great.
However when I try to open the same site in Chrome, it does not display properly. It also shows the same effect when viewed from an iPhone.
This is my site - http://v1chu.github.io/
The background images in used in section 2 and 3 are missing whereas it is working fine with Firefox (also in responsive mode). I can't see the background in my device as well.
Also the site content looks very small when viewed in Chrome and device. But it looks just fine when viewed in Firefox.
Please tell me if the way I have built the site is right or not ? Or if something that I have missed which messes up the site on Chrome and devices.
You're heading in the right direction.
Problem #1, Background Images
Your background images don't appear because you are using the background-attachment property with the value fixed. It sets the background in relation to the viewport (browser window). You're basically pinning the background image to the top of the page and by the time you get to your 2nd and 3rd sections you've scrolled past the background image.
You have set background-attachment via the shorthand background property. Remove fixed from the background property.
background: url( '../img/aboutme.jpg' ) no-repeat center;
Problem #2, Text size
You need to use a responsive meta tag. Here's one that I use:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
The problem seems to be here:
.s2 {
background: url(../img/aboutme.jpg) no-repeat center fixed;
}
I removed the fixed and the background displayed in chrome
s2 {
background: url(../img/aboutme.jpg) no-repeat center;
}
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.
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 fairly strange issue that I'm experiencing with jquery mobile / phonegap and IOS.
I've created a web app with html / css and so far it works exactly as expected on android, (The content scrolls vertically in the viewport) however on ios (my test platform is an iphone 4s), the page is limited vertically to the viewport. It scrolls just fine, but all content that sits below the viewport vertically get's cut off, IE the only content that will display is what I see in the upper half of the page, nothing below the viewport will display.
an excerpt from my css file:
html, body {
min-height:100%;
overflow-x:hidden;
background-attachment:fixed;
}
body {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
-webkit-font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
}
and my html page, in the head section:
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1 minimum-scale=1; user-scalable=no" />
Here's a couple screenshots of the problem in action:
As you can see from the screen shots, the gradient "should" fill the whole page (ie, expand with content), and it doesn't as there seems to be a hard cutoff at the viewport edge, so any more than a single page of content is not getting displayed. While it's not visible in these screenshots the vertical scrollbars are appearing as they should and the scrolling works fine, just no content is displayed "below the fold".
I am not using iScroll or any other scrolling scripts, just fyi.
I'm not sure if this is some sort of height issue, as I have a min-height:100%; set on the html and body of the page, or if it's some sort of width-device-width issue in the meta tag? I also do not believe I have any overflow-y:hidden set, as that would have limited the content on other platforms, and they work perfectly.
I feel like I must be missing something really basic, as I'm sure it's got to be some sort of css setting somewhere that's limiting the content to the viewport only, and an exhaustive google search could find no similar issues.
Check if your apps default orientation is set to portrait instead of landscape, or if it even supports the portrait orientation. It almost looks like its displaying the app as if its in landscape mode while its clearly in portrait. You can find the available orientation in the Target>General tab, or in the info.plist.
So I've fixed it, and the weird thing is, I'm not exactly sure what I did to fix the issue.
I moved the .ui-page selector from the jquery-mobile file to my own css file, removed the min-height from the html selector and killed the overflow-x from the html, body selectors and boom, it now appears to be working as intended. Wacky... but hey, a win is a win. :)
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