移动设备的独立样式

Question

我想为iOS/Android/Windows移动等创建一个单独的样式(或样式表( ...

如何识别移动设备并对其应用不同的样式？我不想使用屏幕分辨率检测。

基本上我想在移动设备上隐藏一个元素：

<div class="nomobile"> QWERTY </div>  

.js：

<script type="text/javascript">
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
      $('.nomobile').addClass('.hide');
        }
      else{
      $('.nomobile').removeClass('.hide');            
      }
</script>

和 css：

<style>
 .nomobile.hide {display:none;}
</style>

不幸的是，这段代码有问题，因为它不能很好地工作。

Answer 1

互联网上有很多JS库可以做到这一点。我建议是.js

编辑

好的，这是is.js的可能用途，以满足您的需求。您需要在真实的移动设备上测试代码段，因为该功能is.mobile()通过设备的操作系统、浏览器和屏幕的组合进行检测，这意味着代码将无法在桌面浏览器的响应式设计视图上运行！

if(is.mobile()) {
    $('.nomobile').addClass('.hide');
}else{
    $('.nomobile').removeClass('.hide');
}

<style>
 .nomobile.hide {display:none;}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/is_js/0.9.0/is.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nomobile"> QWERTY </div>

Answer 2

如果你不想使用CSS，这样的东西对你有用吗？

$(document).ready(function () {
if (screen.width < 960) {
$('.nomobile').addClass('.hide');
}
else {
$('.nomobile').removeClass('.hide');            
}
});

Answer 3

使用这个"神奇"的 CSS 指令，如果满足大小条件，您可以在其中插入类规则......

@media screen and (max-width:300px){
 .someclass {display:none}  // an example of making something disappear if screen is too small
}

注意：因此，请将"300px"调整到您需要的任何尺寸。