横向和纵向方向变化时的尺寸

Question

我有横向和纵向方向的媒体类型。 当orientation = portrait

时，所有这些都是这样的

当我将手机转向横向时 - 它会为横向方向应用css样式表，但尺寸不同。缩放不起作用。

当我将页面加载为新页面时，这就是页面的外观。样式表工作正常。

当我从横向更改为纵向时 - 它也可以正常工作。

/* For landscape mobile screens */
@media only screen 
and (min-width : 321px) and (max-width:1223px) {
    /* styles */
}
/* For portrait mobile screens */
@media only screen and (max-width:320px) {
    /*styles*/
}

Answer 1

试试这个：

横向@media查询

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { /* STYLES GO HERE */}

Portrait @media查询

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) { /* STYLES GO HERE */ }