CSS Media query device-width

Question

下面是我的CSS：

<style>
        @media only screen and (max-device-width: 500px) {
            body {
                background-color: red;
            }
        }
        
        @media only screen and (max-device-width: 900px) and (min-device-width: 501px) {
            body {
                background-color: yellow;
            }
        }
        
        @media only screen and (min-device-width: 901px) {
            body {
                background-color: blue;
            }
        }
    </style>

若是在iPhone 5真机上观察页面，不论横屏还是竖屏，都是显示红色。但是用Chrome开发者工具那个调试，横竖屏显的颜色就不一样了，这是怎么回事？