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!
Related
Hi,
I have this viewport:
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=1">
and this page width:
html, body {width:100%;min-width:1180px;}
It looks fine on a computer screen. However, if I see it on an iPhone 4 it looks choppy on the right side. So it is necessary to scroll right in order to see the missing part. I dont want that. The whole page should fit inside the screen but it wont unless I reduce the width to 1100px or less but I need it at 1180px.
What is wrong here?
Thank you.
I'm fairly new to coding, but a little while ago I read an article that said you can check which iPhone the user of your app has. This way you can use an if-statement to make the width depending on the device. Maybe google a bit further on "check iOS device programmaticly"? Hope that this did help you in some way!
I have a simple page with
<meta name="viewport" id="extViewportMeta" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
on it, with everything sized nicely to display on an iPhone.
But when I put an iframe on that page, everything inside the iFrame is not zoomable, and scales to the size of the parent page.
How can I allow zooming within the iframe only, without messing with the rest of my page?
What you are requesting is unfortunately not possible.
First off, in you 'viewport' meta tag, your "content" attribute is specifying that the user of your website CAN NOT zoom at all. That is what the 'user-scalable=no' dictates.
Also, your maximum-scale and minimum-scale is set to 1, so even if you remove the 'user-scalable=no', the zooming would disabled by the fact that you there is no scaling range for the user to zoom within.
So to enable zooming for the user you will have to remove the user-scalable=no and set different min and max scale values.
See this link to better understand the settings for the 'viewport' meta tag:
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Secondly, since your 'viewport' meta tag is set on your 'parent' page, these settings apply to anything within that page, i.e the iframe too. Whether the iframe has a different meta 'viewport' tag specifying different settings does not matter since it lives within and abides by the settings of its parent.
This is possible via jQuery. Bind the zooming and panning events to not do anything when zooming and panning outside the divs that you allow zooming and panning. Then for the divs you want to allow zooming and panning, you can use plugins like Panzoom that use "CSS3 transforms and matrix functions" to allow for zooming and panning.
This is not possible as iOS does not allow zooming - you just can scroll through your iFrame.
Is this an external site, that you own? If so, change the CSS code and add it the to viewport like in your question on the top.
Alternatively, you can load the data with PHP. You will surely find a solution for your problem - if not, feel free to ask follow-up questions.
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" />
i have a mobile website for iphone and ipad where i disable user zooming with
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
this works fine as long as the site is in landscape mode. the width of the website is exactly the width of the screen.
then if i rotate the device into portrait mode it gets scaled down so that it fits the new (shorter) width. this is also ok.
but then if i rotate it back to landscape mode it is suddenly scaled to about 125% that means horizontal scrolling is now possible and zooming is not possible since initially disabled.
how can i make it back at 100% zoom when rotated back to landscape?
thanks!
try experimenting with maximum-scale and minimum-scale like so
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />
and see if you can achieve what you are looking for..
Disabling zoom is a bad idea. It's not a perfect solution, but targeting webkit's scaling of font size on orientation change can help minimize the problem. You would leave the head of the document with:
<meta name="viewport" content="width=device-width, initial-scale=1">
Then you would address the font-size scaling in your CSS like this:
body {
font-size: 1.5rem;
line-height: 2.3rem;
-webkit-text-size-adjust: 100%;
}
/* This prevents mobile Safari from freely adjusting font-size */**
Using the maximum-scale and minimum-scaleto stop zooming don't really work because then you take away the user's ability to zoom. That's really a bad idea because it makes your users with bad eyes angry that your website doesn't zoom, while other websites do...
I tried timeouts and all kinds of fancy javascript, then I found this:
https://github.com/scottjehl/iOS-Orientationchange-Fix
via this related question: How do I reset the scale/zoom of a web app on an orientation change on the iPhone?
On that post, Andrew Ashbacher posted a link to the code written by Scott Jehl:
/*! A fix for the iOS orientationchange zoom bug. Script by #scottjehl, rebound by #wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);
That is a solution wrapped nicely in an IIFE so you don't have to worry about name-space issues.
Just drop it in to your script (not into document.ready() if you're using jQuery) and viola!
All it does is disable zoom on devicemotion events that indicate that orientationchange is imminent. It's the best solution I've seen because it actually works and doesn't disable zoom.
EDIT: this approach is not always reliable, especially when you are holding the ipad at an angle. also, i don't think this event is available to gen 1 ipads
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.