[Resolved] Site broken in Opera Mini

Home Forums Support Site broken in Opera Mini

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #962229
    GG

    Hi. So I looked up my site on Opera Mini for Android and it looks broken. Never test before with this browser but saw 17% of my traffic is through this browser. Tried deactivating all plugins but I couldn’t figure out what the issue was. Used the default install of the browser.
    Update: Site seems to show a bit proper when blog module is disabled.

    #962360
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I just checked it out on my Pixel and everything looks great. What about it is broken for you?

    #962500
    GG

    Hi Tom. It seems the data saving feature is the one breaking the site (for automatic and extreme options) and it comes enabled by default. It breaks my SVG icons in single posts, makes menu bar and archive excerpt only show halfway inside the browser and a few other issues. I am not sure how to tell users who use opera to disable or choose alternative options. Could you check with your browser with extreme and automatic data-savings mode (with ad blocker on) enabled respectively?

    #962611
    Tom
    Lead Developer
    Lead Developer

    It looks like setting the data savings to extreme disables javascript on the site, which is likely why this is happening.

    However, it shouldn’t be set to “Extreme” by default – mine was set to “Automatic” and worked nicely.

    I’m not sure how we’d detect Extreme mode and change how the javascript works just for Opera. I’ll do some research.

    #962863
    GG

    It is also broken in automatic mode (on my phone maybe). But yeah, extreme feature and JS don’t play well. I am looking at an alternative way involving a dismissible message that appears in the header on mobile devices telling opera users to choose the high mode.

    #963073
    Tom
    Lead Developer
    Lead Developer
    #963122
    GG

    I tried to hook it but it shows the raw code on the front end. How Should I use it?

    #963487
    Tom
    Lead Developer
    Lead Developer

    You could:

    1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
    2. Set the hook to wherever you want your message to appear.
    3. Add your content:

    <div class="opera-message" style="display: none;">
        Your message in here
    </div>

    4. Set the Display Rules and publish.

    Then:

    1. Create another Hook Element.
    2. Set the hook to wp_footer
    3. Add this as the content:

    <script>
        // Check if current browser is Opera
        var isOpera = window.opera | window.opr | ( navigator.userAgent.indexOf(' OPR/') > -1 ) | ( navigator.userAgent.indexOf(' Coast/') > -1 ) | ( navigator.userAgent.indexOf(' OPiOS/') > -1 );
    
        // Check if the Opera browser is Opera Mini or Opera Mobile in regular mode (called High Savings Mode)
        var isOperaHigh = (navigator.userAgent.indexOf('OPR/') > -1) && (navigator.userAgent.indexOf('Mobile') > -1) && (navigator.userAgent.indexOf('Presto/') < 0);
    
        // Check if the Opera browser is Opera Mini in Extreme Savings Mode
        var isOperaExtreme = (navigator.userAgent.indexOf('Opera Mini/') > -1) && (navigator.userAgent.indexOf('Presto/') > -1);
    
        if ( isOperaHigh || isOperaExtreme ) {
            document.querySelector( '.opera-message' ).setAttribute( 'style', 'display: block' );
        }
    </script>

    4. Set the Display Rules and publish.

    #963644
    GG

    I got it to display on opera and for a while, the message would disappear if ‘high’ or ‘off’ mode was selected in data savings but now it shows when all these modes are selected. Should the js above limit it to extreme and automatic modes? Or is there a way to modify it to just show on Extreme and Automatic modes?

    #963690
    Tom
    Lead Developer
    Lead Developer

    According to the code, it should only display if it’s set to High or Extreme.

    Does your site have any caching that could be conflicting?

    #963696
    GG

    I did a test with cache disabled but it still did not work. But I have shortened the message so that it shows in the header above the menu for opera users in a non-intrusive way. Opera Mini is popular in emerging markets and drives much traffic to sites but often is aggressive with data savings which break sites. Or could you have a suggestion on how to make the message have a close button?

    #964327
    Tom
    Lead Developer
    Lead Developer

    A close button would require javascript and cookies (to remember that it’s been closed). This might help?: https://www.gmitropapas.com/generatepress-theme-tutorial-convert-the-top-widget-bar-into-a-notification-window/

    #964520
    GG

    Hi Tom. I found a workaround by modifying the initial code you provided and now I am able to display the message in Automatic and Extreme modes. Thanks for the help.

    #964608
    Tom
    Lead Developer
    Lead Developer

    Awesome, you’re welcome! 🙂

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.