Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #142874 Reply
    Scott Simenas
    Guest

    My website pages displayed on iPhone and MacBook with Safari browser do not scale correctly. The Safari Zoom is set for 100%, but pages appear as if Zoomed to 200%. Setting the Safari Zoom to 50%, scales the pages correctly. The pages scale correctly on Samsung Android Phone and Windows 11 PC with Chrome browser. We are using Crio theme with PHP version 8.2. All the plugins are current. Please advise. Thank you.

    #142903 Reply
    Brandon C
    Keymaster

    Hi Scott,

    Thanks for reaching out with your Crio WordPress theme questions!  The Crio theme was built to be responsive out of the box but sometimes those elements can be thrown off and require a bit of tweaking.  Is this issue specific to certain pages or are you experiencing it site wide?

    You can try pulling up the website in a private or incognito browser or if you’re using a cache plugin, try disabling it temporarily and see if the issue persists. Sometimes cached CSS or JS files can cause display inconsistencies across browsers.

    Sometimes, media queries may behave differently across browsers so you need to ensure that your CSS media queries are properly set for Safari. You can do this by:

    • Checking if any custom CSS in your theme overrides the responsive settings.
    • Adding specific media queries targeting Safari to adjust the zoom level.

    You can manually adjust the zoom or scaling for Safari by adding a CSS rule:

    @media screen and (-webkit-min-device-pixel-ratio: 2) {
    body {
    zoom: 0.5;
    }
    }

    This rule will apply a 50% zoom specifically for Safari. Test different zoom percentages to find the best value.

    I hope this helps Scott!  Let us know if we can assist you further with this.

Viewing 2 posts - 1 through 2 (of 2 total)
Reply To: Pages do not scale correctly on iPhone
Your information: