如何在 iPad 中调整网页大小/重新缩放

发布于 2024-12-06 13:57:01 字数 449 浏览 2 评论 0原文

我有一个网站，其移动版本使用 jquery mobile。当我将其从纵向更改为横向时，它会正确放大，但当我翻转到纵向时，它会保持相同的缩放级别，并且比视图更宽，这会破坏用户体验。我使用常规：

<meta name="viewport" content="width=device-width, initial-scale=1">

从我所做的所有搜索来看，这应该可以。不幸的是它不适合我。

这是我的问题，我可以使用 onorientationchange 事件来触发页面大小的调整，我只是不知道如何去做。你能帮忙吗？

PS 网站在这里，如果您想看一下 http://tmg.dev.dakic.com/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.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

骑趴 2024-12-13 13:57:01

试试这个，我遇到了类似的问题：

    $(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() 函数：

 $(window).resize();

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();

回复收藏 0 原文

柠檬心 2024-12-13 13:57:01

我通常使用 orientationchange 事件向内容添加/删除 CSS 类，然后从那里开始，而不是重新调整视口的大小。苹果提供了一些独立的示例代码，尽管从记忆中我认为它只包括 90° 和 0° 方向 - 你也需要 -90° 和 180°，如 @zyrex 评论中所示。

iPhoneOrientation 示例代码(developer.apple.com)

根据评论更新：
为了澄清，我不会重新调整 HTML 实体本身的大小，而是更改正在使用的类，并依赖 CSS 来相应地设置样式。举一个简单的例子，假设我想在 body 元素上的两个类之间切换，根据设备方向，我会在我的 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;
  }
}

... 以及类似的操作默认标记：

<body class="portrait">
  <!-- stuff here -->

...然后 CSS 执行所需的操作 - 例如，body 元素的 背景 的不同位置：

body {background: url('images/something.png') no-repeat}
body.portrait {background-position: 30% 50%}
body.landscape {background-position: 10% 25%}

更新 #2
您可能还需要修改元标记中的 maximum-scale 指令。 Mobile Safari 通常在从纵向更改为横向时会进行缩放，而不是重新进行页面布局，这可能就是您所看到的。

maximum-scale 值可以防止这种情况发生，但您应该注意，这也意味着用户无法执行正常的捏合缩放操作。标签的外观如下：

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

也请务必检查此处的答案：

如何在 iPhone 上更改方向时重置 Web 应用程序的比例/缩放？

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?

回复收藏 0 原文

三生池水覆流年 2024-12-13 13:57:01

看来没人知道。据我所知，页面上某处的内容比设备宽度更宽，这就是问题的根源。然而，如何解决这个问题仍然不太清楚。

回复收藏 0 原文

~没有更多了~

关于作者

看透却不说透

暂无简介

文章

861 人气

关注发私信

友情链接

文江博客

如何在 iPad 中调整网页大小/重新缩放

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

qq_aHcEbj

qq_ikhFfg

寻找我们的幸福

把昨日还给我

wj_zym

巴黎夜雨

友情链接

如何在 iPad 中调整网页大小/重新缩放

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

qq_aHcEbj

qq_ikhFfg

寻找我们的幸福

把昨日还给我

wj_zym

巴黎夜雨

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。