iOS Safari html元素不支持缩放子级的宽度

Question

I was trying to center an element in a div that had a transformation on it and noticed that the element would float off the page in iOS Safari only. 我试图将元素放在经过转换的div中，并注意到该元素只会在iOS Safari中浮出页面。 Upon investigation, I believe the problem can be boiled down to the following: 经调查，我认为问题可以归结为以下几点：

<!DOCTYPE html style="width: 100%">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="child1" style="width: 100%"></div>
        <div id="child2" style="width: 100%; scale(2)"></div>
    </body>
</html>

You will find that the computed width on html and thereby child1 is 200%. 您会发现在html上计算出的宽度，因此child1为200％。

Answer 1

The fix is to set additional properties on the html style: 解决方法是在html样式上设置其他属性：

html {
    width: 100%;
    overflow: hidden;
    transform: scale(1);
}

iOS Safari html元素不支持缩放子级的宽度

问题描述

1 个解决方案

解决方案1
1 2018-01-08 19:44:17

iOS Safari html元素不支持缩放子级的宽度

问题描述

1 个解决方案

解决方案1 1 2018-01-08 19:44:17

解决方案1
1 2018-01-08 19:44:17