我的一些博客文章页面有这个奇怪的问题，例如。 http://www.stgobsas.dk/blog/buenosaires/index.html
问题似乎出在我的 CSS3 Animate It 插件上。在任何宽度的桌面浏览器中查看时，它似乎工作得很好(我测试过低至 400 像素)。但是当我在移动设备上查看它时(以及通过使用设备模式的 Chrome 开发者工具)它会更改我的 <header> 的位置属性。和 .header-image 从固定到“不固定”的东西，它使我的标题/菜单栏占用更多的水平空间，例如。 760 像素，其中 .main-wrapper 占据了 375 像素(这是针对 iPhone 6 的)。我真的不明白为什么这个问题只出现在移动浏览器上，而即使窗口宽度相同，桌面浏览器也不会出现。
看看我的 script.js 文件的底部。倒数第二个代码块用于我的博客页面，它导致了问题。最后一个代码块是针对我的首页的，它导致了类似的问题，但是标题/菜单栏的宽度在动画继续时缩小，然后又恢复正常。
更新:如果您在 Chrome 中使用 iPad 大小(或任何大于 700 像素)的设备模式查看它，您会看到同样的问题，但是当您一直向下滚动到底部时，最后的动画正在等待用户滚动到 View 中，然后在这些动画结束后问题就消失了。然后一切又好了。所以肯定是CSS3 Animate It插件的问题。但是为什么会这样呢？
我希望有人能找出问题所在!
最佳答案
初步分析，似乎是由于:
<img src="buenosairescover.jpg" class="fullsize" height="1200" witdh="1600">
删除 width="1600" 和 height="1200"
以及类为“details-container”的 div 的内容。
如果删除该 div 和图像的宽度，问题就会消失。 这是第一首有趣的轨道!
关于jquery - CSS3 Animate 它改变移动设备上某些元素的位置和宽度属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36055665/