Not sure why this happens on Safari for iPad

Mobile
1

http://www.listinventory.com
It looks all “squished” on the iPad. Been tasked with finding out why. Worked fine until adding the featured product block on the right yesterday.

What did I screw up? It doesn’t do this in Safari for Windows.

If you see images at far left corner, it is from jQuery plugin called jQZoom. If I disable the plugin, the “squished” behavior is still exhibited.

Have 3 other jQuery plugins installed called curvyCorners, DataTables, and Countdown. The countdown seems to go away at times, too.

Boss, just left with iPad so I can’t test on my own.

2

I don’t have an ipad to test but if you’ve just added an extra column then I guess it is too wide for the ipads 768px (or 1024px landscape) modes. I believe like the iphone it just scales anything bigger down to fit in the window resulting in it then looking squashed.

There’s an article here that may be of use or search our [URL=“http://www.sitepoint.com/forums/developing-mobile-devices-340/”]mobile forum for more info.

3

I didn’t add an extra column but will post to mobile forum because of lack of help here.

4

http://www.listinventory.com
It looks all “squished” on the iPad. Been tasked with finding out why. Worked fine until adding the featured product block on the rightFriday .

What did I screw up? It doesn’t do this in Safari for Windows.

Have 3 jQuery plugins installed called curvyCorners, DataTables, and Countdown. The countdown seems to go away at times, too.

5

Sorry, I must have misunderstood what you meant when you said:

Worked fine until adding the featured product block on the right yesterday.

The featured block is a whole columns so I took that to mean that you added a whole column. What was there before? Or did the layout just stretch all the way across?

but will post to mobile forum

Usually we would request that you ask for the thread to be moved instead of just posting a new one as we don’t allow duplicate threads. Therefore I will merge the threads to avoid you breaking the rules.

Try to give as much information as possible and perhaps post a screenshot of what you are seeing on the ipad to aid those that may try to help.

because of lack of help here.

Sorry, I thought I was trying to help.

6

I can see the issue on ipad, ok on iphone and android browser
Try

<meta name=“viewport” content=“width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=4.0” />

And adjust the scale values to whatever is required