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

Question

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

 // 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');
 }

请帮我只在移动设备上应用这个东西

Answer 1

我认为您必须首先检测您的设备，也许这个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
    }

Answer 2

试试这个：

在.js文件中：

var appCheck = document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1;
if(appCheck)
{
//your mobile content will goes here. 
}

注意：文件URL.indexOf（'http://'）===-1&amp；文件URL.indexOf（'https://'）===-1；

此代码在浏览器中失败。