为什么我的网站会针对移动设备缩小？

Question

主要 div 宽度为 600 像素。据我了解，iPhone 5 是 640 像素宽。但是当我在 iPhone 5 上拉起网站时，主要的 div 只占据了屏幕的一小部分，也许是三分之一。这是为什么？

Answer 1

所以我看到 IOS 缩小内容，以便在使用 css 转换时整个页面显示在 phone 屏幕上。

所以冒犯 css 是

            background: url('/images/mobile-device-down-arrow.gif') no-repeat center; 
            transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -webkit-transform: rotate(180deg) scale(1);

我们将其替换为

            background: url('/images/mobile-device-up-arrow.gif') no-repeat center;

它解决了问题。

我记得 webkit 中有一个 bug，但我现在找不到了。

Answer 2

这恰好发生在我身上，我设法通过将正在缩小的受影响元素包装在 div 中来解决这个问题，该 div 定义了元素需要的确切宽度，在我的例子中这是: width: calc(100vw - 2rem);

希望这对遇到此问题的任何人有所帮助，它似乎只发生在移动设备上，当使用旋转变换和任何正度数的过渡时，当删除变换时，元素恢复到 0 度而不收缩。

为什么我的网站会针对移动设备缩小？

Why does my website shrink for mobile?

mobile

mobile-website