CSS规模转换iOSSafari放大页面

Question

我试着让一小段文字“缩放

.whatIwantZoomed {
  opacity:0;

    /* Vendor Prefixes here */
  transform:scale(4,4);

    /* Vendor Prefixes here */
  transition:transform 1s, opacity 1s;
}

现在，当从我的 Javascript 函数调用时，将应用一个动画类，将比例减小到 （1，1）：

.whatIwantZoomed.animated {
  opacity:1;

    /* Vendor Prefixes here */
  transform:scale(1,1);
 }

现在，在移动Safari上(都是iOS 7

我在这里要做的是删除这种不需要的视口宽度更改。我尝试将主体设置为具有溢出-x：隐藏的属性; 无济于事，而且我似乎也无法获得视口元标记来帮助我。

有人能解释一下这里的解决方案吗？谢谢

编辑：添加了一个小提琴演示。注意到HTML框架中的滚动条了吗？这就是我试图阻止的。

Answer 1

对于任何看到这个的人来说，它似乎与这个bug有关

根本原因是屏幕外的内容错误地触发了 safari（或 wkwebview）来调整视口的大小。

将此添加到您的视口元标记:

收缩到适合=否

Answer 2

试试这个演示

div {
    text-align:center;
    background-color:red;
    transform-origin: 50% 50%;
    transform:perspective(1200) scale(1);
    animation:animated 1s ease-in-out;    
}

@keyframes animated{
    from{transform:scale(10);opacity:0}
}