响应式移动旋转的问题

Question

我正在制作该网站的移动版本www.simoneschiavo.it/occomputer

我已将media-queries.css应用于使用以下命令格式化原始CSS：

• @media屏幕和（最大宽度：770像素）风景版本

• @media屏幕和（最大宽度：400像素）用于肖像版本

如果您仅以纵向或横向（不旋转）加载页面，则在每个页面中都可以正常工作。 所以？ 好的，它在每个版本中都可以正常运行，但是当我旋转并回来时，很混乱！

好像当我旋转时，它需要一些关于肖像的东西，也需要一些关于风景的东西作为宽度的指标，并将其混合。 还有时重新加载页面，它消失了，并且一切都是白色的，也等待加载。

我已经在我的个人网站www.simoneschiavo.it上使用了这种格式：您可以旋转1000次，并且每次使用正确的媒体屏幕时都可以旋转。 帮帮我 ：）

Answer 1

我使用以下脚本解决了问题：

<script type="text/javascript"> // RELOADS WEBPAGE WHEN MOBILE ORIENTATION CHANGES  
    window.onorientationchange = function() { 
        var orientation = window.orientation; 
            switch(orientation) { 
                case 0: window.location.reload(); 
                break; 
                case 90: window.location.reload(); 
                break; 
                case -90: window.location.reload(); 
                break; 
            } 
    };
</script>

因此，每次u旋转时，它都会在1秒钟内重新加载页面，但这并不是很好。 仍在等待帮助。 谢谢