如何在方向更改（手机）后重新加载CSS文件？

Question

对于我网站上的图库，我使用媒体查询根据屏幕宽度重新调整图像大小（我使用galleria的作品集主题），当您倾斜手机时图像大小应该会改变 - 但这只会发生手动重新加载后。 （添加方向横向或纵向不执行任何操作）。

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

非常感谢！

Answer 1

使用例如jQuery mobile并抓住orientationchange事件。

  $(window).bind('orientationchange', function(e) {
    if(e.orientation === 'landscape'){
        //edit you CSS
        // or reload image
    }else{
        // roll back
    }
});

Answer 2

所有最近的智能手机和平板电脑浏览器肯定支持基于方向的媒体查询，请参阅article here。在那里提到它从iOS 4.0向上支持。如果您向下滚动奖励：iPhone支持部分，它还会针对有关自动触发的电话提供解决方法。

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

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