Question

这是我的代码：

<div class="banner-content">

<p><span style="font-size: 18pt; font-family: Roboto, geneva, sans-
serif;">Welcome to Top 5 Psychic Reading Sites</span></p>
<p><span style="font-size: 10pt; font-family: roboto, geneva, sans-
serif;">We’ve reviewed and rated the best online psychic reading services. 
Now you can find the right psychic to connect with from the comfort of your 
mobile phone. From love psychics to tarot readings, fortune telling to 
career forecasts, your journey to a brighter future starts now.
</span></p></div>

是否可以使用Jquery

在所有移动视图上隐藏内嵌css隐藏

Answer 1

首先将类hideOnMobile添加到span，然后在你的css put中添加：

@media (max-width: 1024px) {
    .hideOnMobile {
        display: none;
    } 
 }

当屏幕小于1024px时，这将使用类hideOnMobile隐藏所有元素，您可以使用断点进行操作。

Answer 2

首先使用一种简单的方法来检测移动设备

function isMobile(){ 
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

现在过滤掉span以检查其中是否有人display:inline并隐藏了它们

isMobile() && Array.from(document.querySelector( "span" )).forEach( function(ele){
  if (ele.style.display == 'inline')
  {
     ele.style.display = 'none';
  }
})

修改

如果您无法通过上述代码获取内联属性，请尝试（working fiddle example）

var propValue = (ele) => window.getComputedStyle(ele).style[prop]; isMobile() && Array.from(document.querySelector( "span" )).forEach( function(ele){ if (propValue(ele) == 'inline') { ele.style.display = 'none'; } })

是否可能跨越内联css隐藏在Jquery的所有移动视图上

2 个答案: