CODEWITHSUNDEEP
javascriptcssipad
Mike
Mike

Reputation: 2559

ipad orientation not triggering CSS change

I have a website whereby a page is populated using JavaScript - a field called salary is controlled on desktop or device using the following on page load

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            $('.salary-desktop').hide();
            $('.salary-tablet').show();
        }

The CSS for the field is as follows:

@media screen and (max-width: 480px) {
    #account-details article table .salary-tablet {
            display: none;
        }

@media screen and (max-width: 768px) {
    #account-details article table .salary-tablet {
        display: table-row;
    }

}

If I access the page on an iPad in portrait, the salary displays OK and if I change the orientation to landscape, the salary hides. All correct.

If I access the page on an iPad in landscape, the salary displays and any change of orientation has the salary always displaying.

Is there something wrong with the CSS or is the fact that the $('.salary-tablet').show(); being called on the iPad when in landscape then caching/overriding any style the CSS attempts to apply to it?

Thanks

Upvotes: 0

Views: 125

Answers (1)

blubberbo
blubberbo

Reputation: 4613

The jQuery you wrote is going to add inline styles, which will take priority over your CSS code. If you want to run specific code for certain orientations, you should target the orientation specifically. In css, something like: 

/* portrait */
@media screen and (orientation:portrait) {
    /* portrait-specific styles */
}
/* landscape */
@media screen and (orientation:landscape) {
    /* landscape-specific styles */
}

and in jQuery, something like: 

$( window ).on( "orientationchange", function( event ) {
  //orientation change code here);
});

Upvotes: 1

Related Questions