Skip to main content
AI Assist is now on Stack Overflow. Start a chat to get instant answers from across the network. Sign up to save and share your chats.

Return to Answer

Adding some commentary. Also putting orientation detection in a separated function for more ease in adaptation.
Source Link
Josh C
Josh C
  • 67
  • 10

This expands on a previous answer. The best solution I've found is to make an innocuous CSS attribute that only appears if a CSS3 media query is met, and then have the JS test for that attribute.

So for instance, in the CSS you'd have:

@media screen only and (orientation:landscape) { // Some innocuous rule here body { background-color: #fffffe; } } @media screen only and (orientation:portrait) { // Some innocuous rule here body { background-color: #fffeff; } }

You then go to JavaScript (I'm using jQuery for funsies). Color declarations may be weird, so you may want to use something else, but this is the most foolproof method I've found for testing it. You can then just use the resize event to pick up on switching. Put it all together for:

function detectOrientation(){ // Referencing the CSS rules here. // Change your attributes and values to match what you have set up. var bodyColor = $("body").css("background-color"); if (bodyColor == "#fffffe") { return "landscape"; } else if (bodyColor == "#fffeff") { return "portrait"; } } $(document).ready(function(){ var orientation = detectOrientation(); alert("Your orientation is " + orientation + "!"); $(document).resize(function(){ orientation = detectOrientation(); alert("Your orientation is " + orientation + "!"); }); });

The best part of this is that as of my writing this answer, it doesn't appear to have any effect on desktop interfaces, since they (generally) don't (seem to) pass any argument for orientation to the page.

This expands on a previous answer. The best solution I've found is to make an innocuous CSS attribute that only appears if a CSS3 media query is met, and then have the JS test for that attribute.

So for instance, in the CSS you'd have:

@media screen only and (orientation:landscape) { // Some innocuous rule here body { background-color: #fffffe; } } @media screen only and (orientation:portrait) { // Some innocuous rule here body { background-color: #fffeff; } }

You then go to JavaScript (I'm using jQuery for funsies). Color declarations may be weird, so you may want to use something else, but this is the most foolproof method I've found for testing it. You can then just use the resize event to pick up on switching. Put it all together for:

function detectOrientation(){ var bodyColor = $("body").css("background-color"); if (bodyColor == "#fffffe") { return "landscape"; } else if (bodyColor == "#fffeff") { return "portrait"; } } $(document).ready(function(){ var orientation = detectOrientation(); alert("Your orientation is " + orientation + "!"); $(document).resize(function(){ orientation = detectOrientation(); alert("Your orientation is " + orientation + "!"); }); });

The best part of this is that as of my writing this answer, it doesn't appear to have any effect on desktop interfaces, since they (generally) don't (seem to) pass any argument for orientation to the page.

This expands on a previous answer. The best solution I've found is to make an innocuous CSS attribute that only appears if a CSS3 media query is met, and then have the JS test for that attribute.

So for instance, in the CSS you'd have:

@media screen only and (orientation:landscape) { // Some innocuous rule here body { background-color: #fffffe; } } @media screen only and (orientation:portrait) { // Some innocuous rule here body { background-color: #fffeff; } }

You then go to JavaScript (I'm using jQuery for funsies). Color declarations may be weird, so you may want to use something else, but this is the most foolproof method I've found for testing it. You can then just use the resize event to pick up on switching. Put it all together for:

function detectOrientation(){ // Referencing the CSS rules here. // Change your attributes and values to match what you have set up. var bodyColor = $("body").css("background-color"); if (bodyColor == "#fffffe") { return "landscape"; } else if (bodyColor == "#fffeff") { return "portrait"; } } $(document).ready(function(){ var orientation = detectOrientation(); alert("Your orientation is " + orientation + "!"); $(document).resize(function(){ orientation = detectOrientation(); alert("Your orientation is " + orientation + "!"); }); });

The best part of this is that as of my writing this answer, it doesn't appear to have any effect on desktop interfaces, since they (generally) don't (seem to) pass any argument for orientation to the page.

Source Link
Josh C
Josh C
  • 67
  • 10

This expands on a previous answer. The best solution I've found is to make an innocuous CSS attribute that only appears if a CSS3 media query is met, and then have the JS test for that attribute.

So for instance, in the CSS you'd have:

@media screen only and (orientation:landscape) { // Some innocuous rule here body { background-color: #fffffe; } } @media screen only and (orientation:portrait) { // Some innocuous rule here body { background-color: #fffeff; } }

You then go to JavaScript (I'm using jQuery for funsies). Color declarations may be weird, so you may want to use something else, but this is the most foolproof method I've found for testing it. You can then just use the resize event to pick up on switching. Put it all together for:

function detectOrientation(){ var bodyColor = $("body").css("background-color"); if (bodyColor == "#fffffe") { return "landscape"; } else if (bodyColor == "#fffeff") { return "portrait"; } } $(document).ready(function(){ var orientation = detectOrientation(); alert("Your orientation is " + orientation + "!"); $(document).resize(function(){ orientation = detectOrientation(); alert("Your orientation is " + orientation + "!"); }); });

The best part of this is that as of my writing this answer, it doesn't appear to have any effect on desktop interfaces, since they (generally) don't (seem to) pass any argument for orientation to the page.