CODEWITHSUNDEEP
cssmobilescreen-orientation
user1943342
user1943342

Reputation: 11

How to reload the CSS file after orientation change (phone)?

For the gallery on my website I use media queries to readjust the image sizes depending on the screen width (I use the folio theme by galleria) and the image size is supposed to change when you tilt your phone - but that only happens after you reload it manually. (Adding orientation landscape or portrait doesn't do anything).

So basically, I want to avoid reloading the whole page because it involves reloading the images - the information is in the CSS file, can I reload that file individually?

Thanks a bunch!

Upvotes: 1

Views: 2024

Answers (2)

Peter Jurkovic
Peter Jurkovic

Reputation: 2896

Use e.g. jQuery mobile and catch orientationchange event.

  $(window).bind('orientationchange', function(e) {
    if(e.orientation === 'landscape'){
        //edit you CSS
        // or reload image
    }else{
        // roll back
    }
});

Upvotes: 1

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

All recent smartphone and tablet browsers definitely support media queries based on orientation, see article here. It is mentioned there that it is supported from iOS 4.0 upwards. If you scroll down the Bonus: iPhone support section it also provides a workaround for phones that are quirky about triggering automatically.

If you specify the media query as part of the CSS include it shouldn't be loaded until it becomes applicable, automatically solving your problem.

If you still run into platforms that have problems, you can use the Javascript onOrientationChange event as a fallback, using for example Mootools Utility/Asset to load images and stylesheets at runtime, or its jQuery counterpart.

Upvotes: 0

Related Questions