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).
Related
I'm trying to get my Three.js app to work with JQuery Mobile and have run into a little issue. I'm new to JQuery mobile, but everything I have read says that I should use:
$(document).on('pageinit', function(){
});
instead of
$(document).ready() {
});
my problem is that if I move my initialization code from document ready to to pageinit, then nothing is being displayed even though the rendering loop is running.
I have looked at the html and discovered that the canvas element that Three.js/WebGL reders to has a width of 0 when using pageinit, and a width matching the display with when using document ready.
Everything I have read about JQuery Mobile warns against using document ready, so I'd really like to get this to work with page init. Can anybody help me figure out why the canvas element has a zero width when using pageinit?
I'm creating an app in jQuery Mobile based on wordpress with a child theme for twenty twelve. Probably the CSS could be made better. The app loads fine and is without zoom and no scrolling with
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
But when changing orientation on an iPhone from landscape to portrait I'm getting a wider screen than the actual page and the scroll shows up in the middle when there is an input-field in a form on the page. however when choosing (focus-ing) on a form input field the page re-renders and the width is correct with no scroll. I've used some responsive css present like #media only screen and (max-width:..
So is there a good way of doing this?
//This one triggers on orientation change
jQuery( window ).on('orientationchange', function( event ) {
if(event.orientation == 'portrait'){
// Rerender as if an input field is focused..
}
});
This could be a solution. Better ofcourse is to prevent it to build some good CSS from the ground up, but if using twenty twelve as a parent theme in wordpress - this code might come handy.
jQuery( window ).on('orientationchange', function( event ) {
if(event.orientation == 'portrait'){
jQuery('body').fadeOut(300, function(){
jQuery('body').fadeIn(300);
});
}
});
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.
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.