I am using bootstrap to build a client's site and I have come unstuck when trying to target landscape and portrait orientation on mobile in order to add some specific styles for both viewports. How do I target portrait and landscape orientation for mobile styles? I need to add specific styles at 320px breakpoint and certain styles at 480px breakpoint. With my current media queries this is not working Currently in my stylesheet I have the following:
/* portrait phones */
@media only screen and (max-width: 320px) and (orientation:portrait) {
/* Styles */
}
/* landscape phones */
@media only screen and (min-width: 321px) and (orientation:landscape) {
/* Styles */
}
If I put styles in for landscape however I don't think they are being picked up. Every time I make a change and then refresh my Iphone I don't see any difference. Im thinking maybe my media queries are wrong? If there is a better way to target mobile states I would greatly appreciate any help.
I managed to resolve this issue in the end by adding a max-width to my 321px media query and was able to target both landscape and portrait mobile orientation. I also found in my header I had: initial-scale=1 which seemed to be causing the problem and after removing it I was able to target the mobile breakpoints I needed.
/*Portrait phones */
@media (max-width:320px){}
/* Landscape phones and down */
@media (min-width: 321px) and (max-width: 480px) {}