css link for device landscape orientation shows up when resizing the (pc) browser window

Question

I want that my "landscape" css will load only in device landscape mode, and it's loading when resizing (shrinking) the brwoser and ruin my normal css styles.

Here is the code I use in my index html file:

Here is the media query I use for the device:

@media screen (max-width: 1200px), screen and (max-height: 800px) { ... }

guvenckardas · Accepted Answer · 2015-09-08T13:28:10.130

2

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

edited Sep 08 '15 at 13:28

answered Sep 08 '15 at 12:39

guvenckardas

738
4
8

Thank you, but can you tell me what is the problem that the css suddenly shows up in pc? it should be loading only in device landscape mode @guvenckardas – alonblack Sep 08 '15 at 12:44
because browser's default orientation mode is landscape. Please don't forget the answer 'mark as correct'. Thank you – guvenckardas Sep 08 '15 at 12:49
Also landscape and portrait all about rate of window width and height values. If you resize the window like mobile you see that, portrait media query in action. – guvenckardas Sep 08 '15 at 12:54
But what should I do if I want it to take action onlyin device landscape mode and not to appear in pc at all!! – alonblack Sep 08 '15 at 13:01
meybe you can use js controller. I will add the code – guvenckardas Sep 08 '15 at 13:25
Is that ok? If it's ok please 'mark as correct'. Thanks @alonblack – guvenckardas Sep 08 '15 at 14:10
I appreciate your affort, i am not a developer i am a designer and I should ask the developer what he thinks if he will say it's ok i will mark it as the correct answer no doubt asap. – alonblack Sep 08 '15 at 14:32
@alonblack, did you check the answer? – guvenckardas Sep 11 '15 at 07:30
yes, He told me to use "media only screen" and it worked for me, but he did say that your answer is good. Do you think I should mark it as the correct answer? – alonblack Sep 17 '15 at 06:49
@alonblack, you absolutely mark that as the correct answer. – guvenckardas Sep 17 '15 at 06:59

css link for device landscape orientation shows up when resizing the (pc) browser window

1 Answers1