Skip to content

Modus-Logo-Long-BlackCreated with Sketch.

  • Services
  • Work
  • Blog
  • Resources

    OUR RESOURCES

    Innovation Podcast

    Explore transformative innovation with industry leaders.

    Guides & Playbooks

    Implement leading digital innovation with our strategic guides.

    Practical guide to building an effective AI strategy
  • Who we are

    Our story

    Learn about our values, vision, and commitment to client success.

    Open Source

    Discover how we contribute to and benefit from the global open source ecosystem.

    Careers

    Join our dynamic team and shape the future of digital transformation.

    How we built our unique culture
  • Let's talk
  • EN
  • FR

Millions of devices in the market rely on Android Browser as a platform for web application delivery, even through PhoneGap/Cordova deployments. Unfortunately, the browser is shipped with numerous bugs that prevent expected behavior to commence. One of the issues in particular involves viewport (screen) scaling to reset on orientation change.

The** orientation change** event on Android devices is one of the most peculiar of all. It only happens when device is rotated back to portrait. Yes, it never occurs in landscape mode. Oddly enough, it doesn’t happen quite every time for portrait orientation, either. In other words, the bug is unpredictable and renders applications unusable.

Here’s a quick snapshot of what we saw.

Sencha Touch 1 rotation scaling bug

There are a couple of issues here. First, the meta viewport instruction resets on orientation change. The way to go with this is to listen for the orientation change event and reapply the meta tag. Before I demonstrate that, I want to point out another bug.

Many Android Browser builds chose not to honor the width=device-width part of the meta viewport tag. Although it’s officially recognized as an Android bug, we have to wait for Google to replace the browser with Chrome. This is definitely not going to help with so many devices locked to the old versions of Android. Fear not, we have a solution for it.

The fix involves patching your viewport class. More precisely, that should be the view that stays persistent in all sections of your web application. If you have more than one, that apply the fix to all instances.

App.view.Viewport = Ext.extend(Ext.Panel, {
    // 1 - activate orientation monitoring for this component
    monitorOrientation: true,
    initComponent : function() {
        // 2 - only trigger for the offending OSs
        if (Ext.is.Android) {
            // 3 - cache the meta tag reference
            var viewport = Ext.DomQuery.selectNode('meta[name=viewport]');
            this.on('orientationchange', function () {
                // 4 - reset the viewport settings with a high-enough width
                var reset =  'width=10000, initial-scale=1.0, '
                          + 'minimum-scale=1.0, maximum-scale=1.0, user-scalable=0';
                viewport.setAttribute('content', reset);
            });
        }
        App.view.Viewport.superclass.initComponent.call(this);
    }
};

The breakdown of the process looks like this:

  1. Make sure the component monitors orientation changes.
  2. Check that you are applying the fix for the right OS. It’s not necessary to fix anything on browsers that don’t reflect the issue so we limit the patch for Androids.
  3. Grab that meta tag reference and keep it in memory. In this way it will not be recreated with each orientation change.
  4. Reset the meta viewport tag.

Notice width=10000 in section 4. In any other case, this should read width=device-width. Incidentally, that won’t work in all versions of the Android Browser, thus we have to be more specific. To avoid other bugs with screen size calculations, we are safe leaving it a large number, something as large as 10000. No worries, the browser will understand it’s boundaries and will limit itself to the maximum pixels available.

Here’s a video demonstration of the bug and fix:

Posted in Application Development
Share this

Grgur Grisogono

Grgur Grisogono is a software architect at Modus Create, specializing in JavaScript performance, React JS, and Sencha frameworks. He helped clients ranging from Fortune 100 to major governments and startups successfully release enterprise and consumer-facing web applications. He has also organized three tech conferences and co-authored Ext JS in Action SE. If Grgur's posts were helpful, maybe his 16 years of experience could help your project too.
Follow

Related Posts

  • Sencha Touch 2.0
    Sencha Touch 2 Touch Events Re-firing

    While generally we try to avoid native browser alert() and confirm() we sometimes have no…

  • Sencha Touch 2.0
    Sencha Touch 2 Touch Events Re-firing

    While generally we try to avoid native browser alert() and confirm() we sometimes have no…

Want more insights to fuel your innovation efforts?

Sign up to receive our monthly newsletter and exclusive content about digital transformation and product development.

What we do

Our services
AI and data
Product development
Design and UX
Modernization
Platform and MLOps
Developer experience
Security

Our partners
Atlassian
AWS
GitHub
Other partners

Who we are

Our story
Careers
Open source

Our work

Our case studies

Our resources

Blog
Innovation podcast
Guides & playbooks

Connect with us

Get monthly insights on AI adoption

© 2025 Modus Create, LLC

Privacy PolicySitemap
Scroll To Top
  • Services
  • Work
  • Blog
  • Resources
    • Innovation Podcast
    • Guides & Playbooks
  • Who we are
    • Our story
    • Careers
  • Let’s talk
  • EN
  • FR