Question

我有一个网站，其中使用JavaScript填充页面 - 在桌面或设备上使用以下页面加载来控制名为salary的字段

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            $('.salary-desktop').hide();
            $('.salary-tablet').show();
        }

该字段的CSS如下：

@media screen and (max-width: 480px) {
    #account-details article table .salary-tablet {
            display: none;
        }

@media screen and (max-width: 768px) {
    #account-details article table .salary-tablet {
        display: table-row;
    }

}

如果我以纵向方式访问iPad上的页面，则工资显示正常，如果我将方向更改为横向，则工资会隐藏。一切都正确。

如果我在横向上访问iPad上的页面，则会显示薪水，并且任何方向更改都会始终显示薪水。

CSS有什么问题，或者是$（'。salary-tablet'）。show（）;在横向上调用iPad然后缓存/覆盖CSS尝试应用于它的任何样式？

由于

Answer 1

您编写的jQuery将添加内联样式，这将优先于您的CSS代码。如果要为特定方向运行特定代码，则应专门针对方向。在css中，类似于：

/* portrait */
@media screen and (orientation:portrait) {
    /* portrait-specific styles */
}
/* landscape */
@media screen and (orientation:landscape) {
    /* landscape-specific styles */
}

在jQuery中，类似于：

$( window ).on( "orientationchange", function( event ) {
  //orientation change code here);
});

ipad方向不会触发CSS更改

1 个答案: