Here is a page I am working on for a class. Don't worry that it's all divs - the exercise allows that as it was to experiment with web fonts.
My problem is that the page renders fine in IE, Firefox, Safari, but on the iPad it doesn't center and the scale is off. If you look at the top left header "Top of the Napkin", it actually breaks into 2 lines on the iPad. There is no left margin yet quite a bit of right margin.
thanks for any help -
The above answer did not work for me on the iPad. Here is what did work.
In the body tag I added the minimum width of what I would want in a browser.
body { min-width:1080px; }
This worked without adding
<meta name="viewport" width=device-width />
but I left it in the header for good measure.
I checked the page on my iPad (latest IOS v5.1) and I can see the text "Top of the Napkin" on one line, though you are right about the entire page not getting center aligned..
For that, I would suggest you to do 2 things;
A. Set the viewport width as below (add this line inside your head element);
<meta name="viewport" width=device-width />
The above line would set your viewport width to device-width (i.e. 768px on the iPad). You can even hard code the value as
<meta name="viewport" width=900 />
Though this is not the best approach.
B. The other thing you can try is giving the following style to your body element
margin:0 auto
This would effectively center align your entire page.
There is some real good information on how to design websites for mobile (iPhone/iPad, etc) on http://bit.ly/rs1npZ
You probably need a viewport meta tag. Check the link for info on what this does and which to choose. http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/
I had the same problem.
for my part, the page was broken because of div elements bigger than their container.
i fixed it by playing with overflow-x property.
You may try putting overflow-x:hidden; on your containers.
I had the same problem. Here is how I fixed it:
<meta name="viewport" content="width=device-width, maximum-scale=.9" />
Related
I'm trying to recompile an app for iOS 7, since nothing of the old one works so far.
One of the many problems is that I'm using some inputs inside UIWebViews. Text inputs, pickers etc.
Now, when the iOS 7 shining white keyboard appears, all the bottom fixed elements in the webpage (such as, confirm buttons) are scrolled upward, as if the 'top' of the virtual keyboard is the new bottom of my UIWebView. This is a substantially different behavior from iOS6.x
Is there any magic trick to make the virtual keyboard behavior work like it used to, without injecting JS/CSS to the webView?
This fixed the problem for my cordova app. I'm not sure if it applies to you but just in case.
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" />
In our case this would fix itself as soon as user scrolls. So this is the fix we've been using to simulate a scroll on blur on any input or textarea:
$(document).on('blur', 'input, textarea', function () {
setTimeout(function () {
window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
}, 0);
});
I ran across exactly the same problem & gave up after two days of experimenting. It seems that:
a) all bottom-fixed elements go upwards so that their bottom offset is relative to the top edge of the keyboard
c) all top-fixed elements stay in their original position (do not move upwards as they used to) - note that top-absolute elements work ok.
The only solution I found was to have a custom iPad stylesheet that replaces all fixed elements with absolute elements, sets the css bottom property to auto and uses top instead
Opposum, your solution worked for me but only when the scale was set to 1.0. If I set it to 0.9 then it would be like it was before your suggested fix. I set initial-scale, maximum-scale, and minimum-scale to 0.9 and the bouncing effect of the fixed objects when the keyboard appeared was still happening.
In Bootstrap 3, there seems to have been an issue with the fluid grid causing a horizontal scrollbar to appear on small devices. My question is different...
I'm not getting any scrollbar, unless I click a text input. On an iPhone, there is an automatic zoom on the current field. This is ok (I guess), but after leaving the field, the zoom is not removed, so the content is clipped and there's an ugly horizontal scrollbar.
Is there a way to prevent the zoom? Or maybe tell mobile safari to set the zoom back to what it was?
First: you can create fluid-responsive tables. But you do not need it. If you don't give the <table> the class="responsive" the horizontal scroolbar doesn´t appear.
If you want to disable the zoom on small devices use this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Hope, it helps :)
Ahhh... I'm beginning to tire of the viewport tag.
Anyway, hopefully someone out there can assist with this question. I know similar questions have been asked on SO, and I've read quite a few of them, but they seem to be under different circumstances.
I have a DIV that is 100%x100%.
I've applied background-size:cover to the background image inside this div.
When testing in all browsers, I get a nice, pretty, full-screen background image that sizes with the browser window - as it should. Even on the ipad it will pull up and look great, in both orientations. :) Happy.
Now, as soon as I add the ridiculous viewport meta tag (which I'm foreseeing a lot of users slapping onto their websites alongside my script), the ipad revolts, unless it's exactly this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
As soon as I allow scaling of the page by changing the initial-scale or maximum-scale, the background-size cover breaks.
Any ideas?
Also, would it be a bad move to just remove the viewport meta tag in the script to avoid all of this together?
Thanks!
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
I developed a web app for the iPhone which has a page with a textarea widget. When I begin editing the contents of this textarea widget Safari zooms in and makes the text really, really big. Now I can't see the document anymore, just a little postage stamp sized piece of it.
Are there any properties I can set which will keep mobile Safari from doint this? I just want the textarea font to stay the same size when I edit its text. Thanks.
You can add:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
to your HTML header.
You would need to set your textarea font-size to 16px and have an initial-scale of 1.0.
But if your app is not really designed for the iPhone, that is, if it’s essentially a normal web page that users should be able to scale, then you should probably just become okay with it. The worst thing to do to your users is show them 6pt text they can’t zoom, you know? Some of them won’t have perfect vision.
See also: Apple's list of all Safari/iOS special meta tags.