1

对于我网站上的画廊，我使用媒体查询根据屏幕宽度重新调整图像大小（我使用 Galleria 的 folio 主题），并且图像大小应该在您倾斜手机时发生变化 - 但这只会在您重新加载后发生它手动。（添加方向横向或纵向不会做任何事情）。

所以基本上，我想避免重新加载整个页面，因为它涉及重新加载图像 - 信息在 CSS 文件中，我可以单独重新加载该文件吗？

非常感谢！

4

2 回答 2

1

使用例如jQuery mobile和 catchorientationchange事件。

  $(window).bind('orientationchange', function(e) {
    if(e.orientation === 'landscape'){
        //edit you CSS
        // or reload image
    }else{
        // roll back
    }
});
于 2013-05-04T09:53:42.670 回答
0

所有最近的智能手机和平板电脑浏览器都绝对支持基于方向的媒体查询，请参阅此处的文章。那里提到它从 iOS 4.0 开始受支持。如果您向下滚动Bonus：iPhone 支持部分，它还为那些对自动触发古怪的手机提供了一种解决方法。

如果您将媒体查询指定为 CSS 包含的一部分，则在它适用之前不应加载它，从而自动解决您的问题。

如果您仍然遇到有问题的平台，您可以使用Javascript onOrientationChange 事件作为后备，例如使用Mootools Utility/Asset在运行时加载图像和样式表，或其 jQuery 对应物。

于 2013-05-04T09:53:36.313 回答