WPB sites do not always look right on ipads

[coolemail2]

Has anyone had a problem with viewing websites on ipads? We have two which are OK on normal computers and on an iphone. However, they do not look right on an ipad.

Is this a known bug?

 

[IgorG]

Is it related to this issue? http://forum.parallels.com/showthread.php?296700

 

[coolemail2]

I'm not sure but I have PM'd you 2 live sites that have a problem with the ipad. Thanks Igor

 

[coolemail2]

Hi Igor, Any clues on what is happening with ipads? The same websites are having problems with Safari as well. Is it something our end or anything that you can solve in the next release. It is causing some issues for us.

 

[coolemail2]

I would be grateful if other WPB website users could have a look at their websites on an ipad and let us know if they resolve OK. Certain things are not showing as they should and I would be grateful for some guidance on it. Please have a look at the URL below which on an ipad looks like this and I am not sure what is causing it (half table missing and calendar only half showing). Thank you, in advance, for any help.

http://www.hillsidecottagepadstow.co.uk/bookings/availability/

 

[vhJayE]

Looks just the same for me, and my development iPad emulator gives the same result too.

Out of interest I started to type "iPad website" into Google, and the first suggestion that popped up was "iPad website width issue" which returned hundreds of results from people having the same problem - it seems to be something to do with how iPad Safari processes 'div' tags for page width - there seemed to be some suggestions there but it'd be up to Parallels to see what'd work since it's essentially their code, but you may find something you can try yourself to fix this temporarily for the client.

EDIT: A popular suggestion seems to be to add the following line to your HTML:

<meta name="viewport" content="user-scalable=no, width=device-width" />

Jay

 

[coolemail2]

Thank you Jay. I will try that and see what it does and report back.

 

[coolemail2]

I tried to put that code in html into a "script" module and it did not work sadly.

Any suggestions of what we can do next anyone - Igor or Egor are you able to see this also?

 

[Egor Chernodarov]

Hi there!

I have no ipad right now to check up. Could you put this code:

<meta name="viewport" content="user-scalable=no, width=device-width" />

not in "script" module, but in "Settings" -> Advanced -> Edit metadata ?

 

[Egor Chernodarov]

Ouch... looks like you have elastic design with proportional width (~55% from device-width). Your Ipad have only 1024 pixel width, so your content column does not fit to 1024*0.55=563px. You can see such effect by decreasing you PC browser window.

To resolve issue on iPad, you can increase width, or convert site to "fixed-width" layout.

 

[coolemail2]

The meta script did not do anything. However, making it a fixed width has worked - thank you. It was set to "liquid". I thought that was most sensible based on the face that most people have very varying screen sizes with mobile devices. Is that assumption not correct?

 

[Egor Chernodarov]

"Liquid" is good way to support different screen sizes. I think your issue with Ipads was caused because you used "tables" which displayed very bad on small screens.

Maybe it will be a good opportunity for site owners to set additionally minimal width for "liquid" sites.