为什么我的网站在移动设备上会缩小

Question

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

网站

Answer 1

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

所以有问题的 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 中的一个错误，但我现在找不到它。

Answer 2

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

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