ipad 方向未触发 CSS 更改答案

【问题标题】：ipad orientation not triggering CSS changeipad 方向未触发 CSS 更改
【发布时间】：2016-06-13 16:30:07
【问题描述】：

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

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 尝试应用于它的任何样式？

谢谢

【问题讨论】：

.show(); 会将display 设置为标签上的内联样式，因此它将是最高的特定规则。

标签： javascript css ipad

【解决方案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);
});

【讨论】：