如何在ipad中调整/重新缩放网页 [英] how to resize / rezoom webpage in ipad
问题描述
我有一个网站,它使用jquery mobile为它的移动版本。我有一个问题,当我将它从纵向更改为横向时,它可以正确放大,但是当我翻转到纵向时,它保持相同的缩放级别,并且比打破用户体验的视图更宽。
我使用常规:
I have a website that uses 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.
这是我的问题,我可以使用onorientationchange事件来触发页面的大小调整,我只是不确定如何去做。你能帮忙吗?
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。网站在这里,如果你想偷看 http://tmg.dev.dakic.com/mobile
P.S. website is here if you would like to take a peek http://tmg.dev.dakic.com/mobile
谢谢你,
Zeljko
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');
在某些事件中尝试使用resize()函数:
Try otherwise using the resize() function at certain events:
$(window).resize();
这篇关于如何在ipad中调整/重新缩放网页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!