mobile safari：设备旋转导致网站缩放不良

发布于 2024-10-18 21:56:07 字数 371 浏览 2 评论 0原文

我有一个适用于 iphone 和 ipad 的移动网站，我在其中禁用用户缩放，

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

只要该网站处于横向模式，此功能就可以正常工作。网站的宽度恰好是屏幕的宽度。然后，如果我将设备旋转到纵向模式，它就会缩小，以适应新的（较短的）宽度。这也可以。

但如果我将其旋转回横向模式，它会突然缩放到大约 125%，这意味着现在可以进行水平滚动，并且由于最初被禁用而无法进行缩放。

当旋转回横向时如何使其恢复到 100% 缩放？

谢谢！

原文

i have a mobile website for iphone and ipad where i disable user zooming with

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

this works fine as long as the site is in landscape mode. the width of the website is exactly the width of the screen.
then if i rotate the device into portrait mode it gets scaled down so that it fits the new (shorter) width. this is also ok.

but then if i rotate it back to landscape mode it is suddenly scaled to about 125% that means horizontal scrolling is now possible and zooming is not possible since initially disabled.

how can i make it back at 100% zoom when rotated back to landscape?

thanks!

分享到QQ

分享到微博

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

发布评论

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

谁的新欢旧爱 2024-10-25 21:56:08

使用 maximum-scale 和 minimum-scale 来停止缩放实际上并不起作用，因为这样你就剥夺了用户缩放的能力。这确实是一个坏主意，因为它会让眼睛不好的用户因为你的网站不能缩放而生气，而其他网站却可以......

我尝试了超时和各种花哨的 JavaScript，然后我发现了这个：
https://github.com/scottjehl/iOS-Orientationchange-Fix

在那篇文章中，Andrew Ashbacher 发布了一个由 Scott Jehl 编写的代码的链接：

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);

这是一个解决方案很好地包装在 IIFE 中，所以你不需要必须担心名称空间问题。

只需将其放入您的脚本中（如果您使用的是 jQuery，则不要放入 document.ready() 中）和 viola！

它所做的只是在指示 orientationchange 即将发生的 devicemotion 事件上禁用缩放。这是我见过的最好的解决方案，因为它确实有效并且不会禁用缩放。

编辑：这种方法并不总是可靠，尤其是当您以一定角度握住 ipad 时。另外，我认为此活动不适用于第 1 代 ipad

Using the maximum-scale and minimum-scaleto stop zooming don't really work because then you take away the user's ability to zoom. That's really a bad idea because it makes your users with bad eyes angry that your website doesn't zoom, while other websites do...

I tried timeouts and all kinds of fancy javascript, then I found this:
https://github.com/scottjehl/iOS-Orientationchange-Fix

On that post, Andrew Ashbacher posted a link to the code written by Scott Jehl:

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);

That is a solution wrapped nicely in an IIFE so you don't have to worry about name-space issues.

Just drop it in to your script (not into document.ready() if you're using jQuery) and viola!

All it does is disable zoom on devicemotion events that indicate that orientationchange is imminent. It's the best solution I've seen because it actually works and doesn't disable zoom.

EDIT: this approach is not always reliable, especially when you are holding the ipad at an angle. also, i don't think this event is available to gen 1 ipads

回复收藏 0 原文

潦草背影 2024-10-25 21:56:07

尝试像这样尝试最大规模和最小规模

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />

，看看是否能实现您想要的目标。

try experimenting with maximum-scale and minimum-scale like so

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />

and see if you can achieve what you are looking for..

回复收藏 0 原文

红衣飘飘貌似仙 2024-10-25 21:56:07

禁用缩放是一个坏主意。这不是一个完美的解决方案，但针对 webkit 在方向变化时缩放字体大小可以帮助最大限度地减少问题。您可以在文档的头部留下：

然后你可以像这样解决 CSS 中的字体大小缩放问题：

body {
    font-size: 1.5rem;
    line-height: 2.3rem;
    -webkit-text-size-adjust: 100%;
}
/* This prevents mobile Safari from freely adjusting font-size */**

Disabling zoom is a bad idea. It's not a perfect solution, but targeting webkit's scaling of font size on orientation change can help minimize the problem. You would leave the head of the document with:

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

Then you would address the font-size scaling in your CSS like this:

body {
    font-size: 1.5rem;
    line-height: 2.3rem;
    -webkit-text-size-adjust: 100%;
}
/* This prevents mobile Safari from freely adjusting font-size */**

回复收藏 0 原文

~没有更多了~