2

First of all I am really sorry for the title of the question as I wasn't able to figure out on how to describe my problem, so this is why I used such title.

Right now I am starter in using media queries and I am using them on my practice project for its responsiveness and I want to apply an orientation lock on that project. Like, the project is compatible on the mobile portrait view but it is not available on the mobile landscape view.

I have applied the following code for the orientation lock, but the problem is that when the browser window is resized and when it matches the screen resolution, the lock applies. I don't want the lock to get applied on the desktop view.

There is a way which is by using device-width but that has been deprecated by mozilla. So, is there any way to resolve this issue with only min-width or something else?

Please let me know if you are unable to understand.

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
    <style>
    #div-2{
    display:none;
    }
    @media screen and(min-width:320px) and (orientation:landscape){
    #div-1{
    display:none;
    }
    #div-2{
    display:block;
    }
    }
    </style>
</head>
<body>
    <div id="div-1"><p>Orientation lock not applied.</p></div>
    <div id="div-2"><p>Orientation lock applied.</p></div>
</body>

Lalit Pal
  • 310
  • 1
  • 5
  • 14
  • Sorry my friend. The post which you have shared is not according to my question. – Lalit Pal Nov 30 '16 at 12:13
  • you want div-1 visible when orientation mode is landscape right? – Mital Gajjar Nov 30 '16 at 12:14
  • Yes I want the div-1 visible in the landscape view, but when the landscape view is of Desktop based. But on the mobile landscape view I want the div-1 to disappear and div-2 to show up. – Lalit Pal Nov 30 '16 at 12:15

2 Answers2

0

Ok i understand now replace the code hope this is useful for you:

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
    <style>

        @media screen and (min-width: 320px) and (orientation:landscape) {
            #div-1 {
                display: block;
}
#div-2 {
                display: none;
}
}
@media screen and (min-width: 961px) and (orientation:landscape) {
#div-2 {
display: none;
}
#div-1{
display:block;
}
}
</style>
</head>
<body>
    <div id="div-1">
<p>Orientation lock not applied.</p>
</div>
<div id="div-2>
        <p>Orientation lock applied.</p>
</div>
</body>
</html>
Mital Gajjar
  • 244
  • 1
  • 6
  • Sorry my friend. Your answer didn't work for me. May be I am unable to explain my question to you and others properly. I am really sorry for that, but I'll try to explain it again. I want the "div-2" to show up when the webpage is in landscape view of mobile device but not to show up in desktop's landscape view. There is a solution towards my problem using device-width property, but mozilla has deprecated that property and suggests not to use it further. So I want to know is there any way to resolve this issue using min-width or height? – Lalit Pal Nov 30 '16 at 12:31
0

I think there is not any strange thing.

You write this media query:

@media only screen and (min-width:320px) and (orientation:landscape) {
        #div-1 {
            display: none;
        }

        #div-2 {
            display: block;
        }
    }

That contains desktop. So in desktop div-1 is hide and div-2 is visible.

If you want this media query works only for mobile you must use max-width

that filters screens that are larger than what you want(Desktop). It means that styles are not for desktop. This media query works on size of browser and if you want to filter some Devices size independent of browser width you must use this media query:

@media only screen and (max-device-width: 320px)
Farzin Kanzi
  • 3,380
  • 2
  • 21
  • 23
  • quite correct but, what about the browser window resizing problem? When someone resizes their browser window(which people use mostly to check the responsiveness of the site) and it comes to a specific width suppose 500px then the media query will run. But I don't want that. I want to run it only for mobile device. – Lalit Pal Nov 30 '16 at 13:04
  • So you can use 'max-device-width' that only works on width of device. There is no different what size the browser has. Then media query does not run by browser resizing. – Farzin Kanzi Nov 30 '16 at 13:13
  • We can use max-device-width and min-device-width, and they have already resolved my question but those properties have been discontinued by Mozilla and they do not recommend to use them further. So that is why I am searching either an alternative or a way to use min-width like device width. – Lalit Pal Nov 30 '16 at 13:22
  • I believe that what i said is the only way. Please see this: http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web – Farzin Kanzi Nov 30 '16 at 13:31
  • Yes, this is one of many ways and mostly used. But, when browsers in the future stops to recognize max-device-width and max-device-height(as Mozilla has already discontinued them) then these properties will not work. No issues my friend. You tried your best. Thank you for all your support. I think I need to use JavaScript to target the devices and to implement my requirement. – Lalit Pal Nov 30 '16 at 13:38
  • See this that i wrote with 'max-device-width' with your firefox: http://drmjenab.com/index11.aspx#. With Shift+Ctrl+M you can see resposive view of firefox. – Farzin Kanzi Nov 30 '16 at 13:59