Question

我想为iOS / Android / Windows mobile等创建单独的样式（或样式表）......

如何识别移动设备并对其应用不同的风格？ 我不想通过屏幕分辨率来检测。

基本上我想隐藏移动设备上的元素：

<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库可以做到这一点。我推荐is.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

用这个＆＃34;魔法＆＃34; CSS指令，如果满足大小条件，您可以在其中插入类的规则...

@media screen and (max-width:300px){

 .someclass {display:none}  // an example of making something disappear if screen is too small

}

注意：所以调整＆＃34; 300px＆＃34;无论您需要什么尺寸。

独立的移动设备风格

3 个答案: