Change layout when changing orientation, navigation and li elements, fixed or static

Is it possible to change the layout to change orientation reliably and cross-browser only with CSS / media queries? I don't think this is even in recent browsers, right?

A look at many of the questions with people trying to reliably detect cross-browser portrait and landscape orientations with CSS only and device-height

and are device-width

outdated I guess I'd be better advised to do this with JavaScript, right?

Like this question I am trying to change the navigation layout to suit portrait and landscape orientation.

Portrait

Landscape

Here is my approach with JavaScript and VergeJS (because it reliably detects the height and width of the viewport), after which I will apply the classes to li

to place them as needed if it body

has either a class portrait

or landscape

, and then checks the height of the viewport in landscape orientation.

// Cross browser portrait landscape detection

// Get viewport width and height values
// http://stackoverflow.com/q/40672125/1010918
function getVergeValues(){
  viewportWidth  = verge.viewportW()
  viewportHeight = verge.viewportH()
  console.log('viewportWidth = '+viewportWidth);
  console.log('viewportHeight = '+viewportHeight);
};
getVergeValues();
window.addEventListener('resize', getVergeValues);

// http://pioul.fr/cross-device-cross-browser-portrait-landscape-detection
function portraitLandscape(){
  screenOrientation = (viewportWidth > viewportHeight)? 90 : 0;
  console.log('screenOrientation = '+screenOrientation);
  if (screenOrientation == 0) {
    body.classList.add('portrait');
    body.classList.remove('landscape');
  }
  else if (screenOrientation == 90) {
    body.classList.remove('portrait');
    body.classList.add('landscape');
  }
};
portraitLandscape();
window.addEventListener('resize', portraitLandscape);

      

        
        
        
      

    

CSS / SCSS will look something like this.

// Landscape layout for navigation on mobile
ul{
  li{
// depending on number of li elements I would also
// have to change the width values, assigning a grid of some sort.
// again I assume this can ONLY be done with JS reliably??
    width: 33.3333333333%; 
    display: inline-block;
    float: left;
    a{
      border-right: 1px solid black;
    }
  }
  li:last-child a {
    border-right: none;
  }
}

// Portrait layout for navigation on mobile
ul {
  padding: 0;
  li {
    list-style: none;
    display: block;
    margin: 0;
    float: none;
    width: 100%;    
    a {
      display: block;      
    }
  }
}

      

        
        
        
      

    

Why is all this?
Navigation fixed

and top:0

, and when the menu button is pressed / pressed, the items li

slide down, this is also fixed

.

I want to avoid the li

elements being inaccessible in landscape orientation because they extend beyond the view height. Note that the number of items li

changes as well, so it is not set, and since they are all fixed, they may never reach them in landscape orientation if there are many. I don't want the user to have to turn on the device in order to be able to see all the elements li

and completely leave the choice of how the site is viewed for the user.

Alternatively, with much less code and arguably much easier to do , should the navigation and elements be simply positioned li

static

if the vertical height in landscape is less than the navigation height including all elements li

?

Yes, I am very kindly not only asking if this can be done in CSS only, but also asking if there is an approach with A) creating a grid for the elements li

and keeping them fixed

or B) positioning the navigation and li

elements static

if there are many.