移动safari:设备轮换导致网站缩放不良

Question

我有一个iphone和ipad的移动网站,我禁用用户缩放

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

只要站点处于横向模式,这样就可以正常工作.网站的宽度正好是屏幕的宽度.然后,如果我将设备旋转到纵向模式,它会缩小,以便适合新的(较短的)宽度.这也没关系.

但是如果我将它旋转回横向模式,它会突然缩放到大约125%,这意味着现在可以进行水平滚动,并且自从最初禁用后无法进行缩放.

如何在旋转回景观时以100%变焦恢复？

谢谢!

Answer 1

尝试尝试最大规模和最小规模

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

看看你是否能达到你想要的......

Answer 2

禁用缩放是一个坏主意.这不是一个完美的解决方案,但针对webkit在方向更改时缩放字体大小可以帮助最小化问题.你会留下文件的头部:

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

然后你会在CSS中解决字体大小缩放问题,如下所示:

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