Условие, основанное на мобильном или неизвестном иным образом браузере

Question

У меня есть форма, которая сжимается в зависимости от размера окна. Тем не менее, нам нужно, чтобы он оставался маленьким на мобильных и других неизвестных браузерах.

Это psuedocode. JQuery отлично, тоже, и я использую v.1.8

if (is_desktop) 
    is_narrow = false; 
else 
    // applies to mobile and unknown browsers 
    is_narrow = true; 

$("#form").toggleClass('narrow', is_narrow); 

Большинство решений там не в состоянии от неизвестных браузеров. Например, они обнаруживают, что браузер является мобильным, и предположим, что это настольный компьютер. Мне нужно принять мобильный телефон, если он не окажется настольным браузером.

P.S., Я также использую PHP, если вы хотите предложить вместо этого решение.

Answer 1

Вы можете использовать среду запросов с небольшой работой над CSS. О HTML, вы можете вставить два варианта формы со скрытым/видимым атрибутом класса, связанным с некоторыми материалами запросов для рабочего стола/мобильного телефона.

Answer 2

Попробуйте использовать Media Queries

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
} 

Используйте эту функцию, чтобы определить, является ли пользователь на мобильном

function is_mobile() { 
     var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry']; 
     for(i in agents) { 
      if(navigator.userAgent.match('/'+agents[i]+'/i')) { 
       return true; 
      } 
     } 
     return false; 
    } 

if (is_mobile) 
    is_narrow = true; 
else 
    // applies to mobile and unknown browsers 
    is_narrow = false; 

$("#form").toggleClass('narrow', is_narrow); 

EDIT:

Вы можете попробовать использовать этот function:

if(jQuery.browser.mobile) 
{ 
    console.log('You are using a mobile device!'); 
} 
else 
{ 
    console.log('You are not using a mobile device!'); 
}