0

The site loads fine on a desktop and on phones. It tested fine on an online ipad simulators. When I try it on the ipad, the browser window loads, shrinks, then loads proper. On an ipad mini some of the jquery functions thereafter do not work either, but do on a regular ipad. This leads me to believe it's a javascript issue. The site was built on Wordpress (Avada Theme). I added a custom header that uses jQuery(in which everything worked fine at one time). I have tried taking that script out, I've tried taking out @media queries, I've tried disabling plugins. Nothing seems to stop this from happening. Any suggestions? Here is a link to the site http://afflv.com

taylor_man
  • 39
  • 5

1 Answers1

0

Browser address bar on iphone/ipad animation sometimes mess your website because that animation popos the written adress and your js plugins treat that as re size event.

I fixed this issue forcing website to be static not responsive, to evaluate the browser and device used this library. http://matthewhudson.me/projects/device.js/

this is something to force a stage size located in content:

Screen: {
            height: function () {
                //iphone <= 5 rotation bug
                if (window.screen.width < window.screen.height && (jQuery(window).width() < jQuery(window).height())) {
                    return window.screen.height;
                }
                else {
                    return jQuery(window).height();
                }
            },

            width: function () {
                //iphone <= 5 roattion bug
                if (window.screen.width >= window.screen.height && (jQuery(window).width() >= jQuery(window).height())) {
                    return window.screen.width;
                }
                else {
                    return jQuery(window).width();
                }

            }
        }

and 

if (DEVICE.tablet() && DEVICE.ipad() && DEVICE.portrait() && Screen.width() >= 768 && Screen.height() > window.innerHeight) {
                $(".content-stage").height(window.innerHeight - $("header").height() - $("footer").height());
            }

A bit helpful, you should get the idea; iPhone Address Bar blocks HTML Page Header Buttons?

Another problem may be this: Ipad Portrait height / innerheight all ipads and ios's:

iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue

Community
  • 1
  • 1
SilentTremor
  • 4,747
  • 2
  • 21
  • 34
  • Thanks for the tips. I've tried the last link you sent to no avail. I'm not fully understanding the main answer you provided. Do you mean to implement the script, and then the site will be static? And from there see what happens, and trouble shoot? – taylor_man Feb 02 '15 at 17:07
  • For last link search it's a stackoverflow url, search in google, for me is working. Regards the question, yes and no you force the site to not be responsive only when some rules are applied (device=ipadmini, browser=safari, 600px – SilentTremor Feb 03 '15 at 08:13