Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

CSS code for informing users to see a screen in a landscape mode on the mobile

I am designing a survey with a partial profile study. I want the respondents taking the survey on the mobile to see the Conjoint screens in the landscape mode. I tried a few methods. The most appropriate one shows the alert in both the landscape and portrait mode whereas, I want the users to see the alert only in the portrait mode!
asked Aug 28 by Megha Saran

2 Answers

0 votes
The code where you are trying to alert, please add below condition so that it alerts only when screen width is less than screen height.

if($(window).width()<$(window).height())

And if you want to alert only if width< height and width < some required range , add $(window).width()<x, change 1100 to required width.

if($(window).width()<$(window).height() && $(window).width()<1100)
answered Aug 28 by Rahul Mittal Gold (11,135 points)
0 votes
So rotating a mobile device triggers a resize event.

I would suggest the following code (which I've used and works):

[HEAD]
<script>
function SetLandscapeNotice(){
    var $containerHeight = $(window).height();
    var $containerWidth = $(window).width();
    if ($containerHeight > $containerWidth) {
        $('#LargeNeeded').css({
        display: 'block'
        });
    }
    else {
        $('#LargeNeeded').css({
            display: 'none'
        });
    }
}

$(document).ready(function () {
    SetLandscapeNotice();//run when page first loads
});

$(window).resize(function () {
    SetLandscapeNotice();//run on every window resize
});
</script>

[Please before the question itself]
<div id="LargeNeeded" style="display: none"><br>
You may wish to rotate your device to landscape mode for this question.<p></div>
answered Oct 8 by Corey1975 Bronze (980 points)
...