移动设备横向模式显示不支持的消息

时间:2015-11-23 07:55:50

标签: jquery html responsive-design

我正在创建响应式网站,它对浏览器做出响应,但是当它在移动横向模式下打开时,不会显示支持模式消息,我使用以下代码实现了这一点,但它也在桌面上应用

 // On Orientation Change
 $(window).resize( function(){
 var h = $(window).height();
 var w = $(window).width();

 if ( w < 600) {
 if(w > h) {
 // Small Screen Landscape Rules
 $('#about').css('display','none');
 $('.landscapemsg').css('display','block');
 }else{
 // Small Screen Portrait Rules
 $('#about').css('display','block');
  $('.landscapemsg').css('display','none');
 }
 // All Small Screen Rules
 }

 });
 }else{
    // Not a mobile device
     $('#about').css('display','block');
 }

请帮我在移动设备上应用此东西

1 个答案:

答案 0 :(得分:0)

我认为你必须先检测你的设备, Maby这个javascript代码可以帮助你。

var device =  navigator.userAgent;
    var patern = 'Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|avantgo|blazer|compal|elaine|fennec|hiptop|iemobile';
    var found = device.match( patern );
    if (found != null) {
        // this is mobile device
    }