Here is a landscape controller css example:
js controller:
function detectmob() {
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
return true;
}
else {
return false;
}
}
if(detectmob()){
$('body').addClass('mobile');
}
css:
@media only screen
and (min-device-width : 320px)
and (max-device-width : 767px)
and (orientation:portrait)
and (max-aspect-ratio: 13/9)
{
.mobile your_target{}
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 767px)
and (orientation:landscape)
and (min-aspect-ratio: 13/9)
{
.mobile your_target{}
}
You can change breakpoints or don't use them.
JS REF:
stackoverflow.com/a/11381730/2686143