javascript - 下拉菜单在移动设备上变形(Google Nexus 5)

Question

我的设计在 PC 上测试时运行良好。

但是当我在移动设备(从 Chrome 开发者工具中选择 Google Nexus 5)上查看页面时，下拉菜单正常，但菜单列表不适合宽度。

在 PC 中，我选择使用 chosen jQuery 库进行下拉。

这是我的脚本

<link rel="stylesheet" href="../assets/chosen-dropdown-plugin/chosen.css">
<script src="../assets/chosen-dropdown-plugin/chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{      
     if(!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) 
     {
        $('#campaign_list').chosen({no_results_text: "Oops, nothing found!"});
        $('#campaign_list_chosen').css({'width':'100%',
                                        'height':'30px',
                                        'border-radius':'2px'});
      }
      $('#campaign_list').css({'width':'100%',
                               'height':'30px',
                               'border-radius':'2px'});
}); 
</script>

因此，当在 PC 上查看时，下拉菜单会被选中，但在移动设备上则不会。那部分工作正常。但在移动设备中，菜单变得扭曲了。

这是一个快照:

Answer 1

您可以使用以下 java 脚本 代码根据设备或桌面设置宽度:

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

if(isMobile.any()){
    console.log("Mobile!");

   // set width for dropdown for mobile

} else {
    console.log("Desktop!");

    // set width for dropdown for Desktop
}

或者使用 Css

#campaign_list {
position:absolute; 
left:10px; 
right:10px; 
margin:auto; 
width:auto !important;
}