how to resize / rezoom webpage in ipad
I have a website that us开发者_开发问答es jquery mobile for it's mobile version. I have a problem when I am changing it from portrait to landscape it zooms in correctly, but when I flip to portrait, it stays same zoom level and is wider then the view which breaks user experience. I use regular:
<meta name="viewport" content="width=device-width, initial-scale=1">
from all the search I did, this should do. Unfortunately it isn't working for me.
Here is my question, I can use onorientationchange event to trigger resizing of the page, I am just not sure how to go about it. Can you help please?
P.S. website is here if you would like to take a peek http://tmg.dev.dakic.com/mobile
Thank you, Zeljko
Try this, I had a similar issue:
$(window).bind('orientationchange', function(event) {
if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) {
$('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
$(window).resize();
$('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=2.0');
$(window).resize();
} else {
$('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
$(window).resize();
$('meta[name="viewport"]').attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=2.0');
$(window).resize();
}
}).trigger('orientationchange');
Try otherwise using the resize() function at certain events:
$(window).resize();
I typically use the orientationchangeevent to add / remove CSS classes to the content, and go from there, rather than re-size the viewport. Apple provide some stand-alone example code, although from memory I think that it only includes 90° and 0° orientations—you need -90° and 180° too, as in @zyrex comment.
iPhoneOrientation sample code (developer.apple.com)
Update per comment:
To clarify, I don't re-size HTML entities themselves, rather change the classes being used, and rely on CSS to style accordingly. To take a simplistic example, say I want to switch between two classes on the body element, depending on device orientation, I would do something like this in my Javascript:
window.onorientationchange = updateOrientation;
// (Might want to do this onload too)
function updateOrientation(){
var o = window.orientation, body = document.querySelector('body');
switch(o){
case 0: case 180:
body.className = 'portrait';
break;
case 90: case -90:
body.className = 'landscape';
break;
}
}
… and something like this in the default mark-up:
<body class="portrait">
<!-- stuff here -->
… and then CSS which does whatever is required—e.g. a different position for the body element's background:
body {background: url('images/something.png') no-repeat}
body.portrait {background-position: 30% 50%}
body.landscape {background-position: 10% 25%}
Update #2
You may also need to tinker with the maximum-scale directive in your meta tag. Mobile Safari typically does a zoom when changing from portrait to landscape, instead of re-doing the page layout, and that may be what you're seeing.
The maximum-scale value prevents this, but you should note that this also means users can't do the normal pinch-to-zoom thing. Here's how the tag would look:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Be sure to check the answers here too:
How do I reset the scale/zoom of a web app on an orientation change on the iPhone?
It seems no-one knows. From what I could see, content on the page somewhere is wider then device-width and this is where the problem originates. However, how to go about solving this is still not quite clear.
加载中,请稍侯......
精彩评论