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.
Related
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 visited mobile-apps-news on an iPad and noticed there's no way I can pinch-to-zoom, it's using a responsive layout - but I'm very curious to how they've blocked pinch zooming under iOS. It's definitely not Javascript.
Anyone know how they've done this?
Thanks!
It's a mobile safari web-kit property. The meta tag named view port has the ability to do so. It defines many parameter in which user-scalable = no value of Content parameter is what you are looking for. It prevents user from scaling the page just by adding a property to the meta tag. You can use the same tag to specify your initial scale and maximum zoom level. <meta name = "viewport" content = "user-scalable = no">. For more information, have a look at the safari developer guide.
Remember to add it with the right syntax, defining the content as well:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
I've tried adjusting my meta viewport tag on a jQM beforepageshow etc it simply doesn't work and I guess that's pretty obvious why. I have one page with a highcharts chart on it and I need to have nothing inside my viewport tag which normally has width=device-width, initial-scale=1,user-scalable=no, minimum-scale=1.0, maximum-scale=1.0
and that's because I want the app to zoom out when the chunky chart goes in, has anyone had any brilliant ideas on how to have one page with different viewport settings? I could link to it without AJAX and then output the right meta tag conditionally but I'd rather not do this.
I dynamically changed the meta viewport tag on a couple of my mobile websites when I want to enable zooming for an image or something else that requires the user looking at small text:
var $viewport = $('meta[name="viewport"]'),
default_viewport = $viewport.attr('content');
$(document).delegate('#page-id-one, #page-id-two', 'pageshow', function () {
//these are the pages that you want to enable zooming
$viewport.attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=5.0');
}).delegate('#page-id-one, #page-id-two', 'pagehide', function () {
$viewport.attr('content', default_viewport);
});
This code expects to be included after jQuery and the meta viewport tag. You can obviously change the contents of the viewport element as you see fit (I believe that Safari will allow a maximum-scale of 10).
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.