ipad 方向未触发 CSS 更改

Posted 2023-02-27

【中文标题】ipad 方向未触发 CSS 更改

【英文标题】：ipad orientation not triggering CSS change

【发布时间】：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 设置为标签上的内联样式，因此它将是最高的特定规则。

【参考方案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);
);