Jump to content
Sign in to follow this  
alexb

ipad compatibility - I'm out of ideas!

Recommended Posts

alexb

Dear PL staff -

 

I cannot for the life of me solve the following issue.

 

Please check the following link, built on Platform Pro, with particular regard to the blog icon top right and the main b&w image:

 

http://alexbulgo.com/the-man-who-made-thunderbirds-go/

 

Now compare with:

 

http://alexbulgo.net/the-man-who-made-thunderbirds-go/

 

built on DMS

 

They both look fine on desktops, but on mobile safari - ipad and iphone, the icons render very badly.

 

I've tried:

 

uploading icon the exact size

uploading twice the size and reducing in WP

 

neither render the image sharply on mobile devices.

 

I think it has something to do with viewport settings...it's almost as if the mobile browser is zooming in the images and blurring them automatically.

 

However, contrast this with www.alexbulgo.net, where the png is uploaded at 2x the size and reduced in WP - this renders perfectly.

 

Help!!!

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Not sure what you're referring to tbh, I have viewed your site on iPhone 5 Safari and I can't see any issue. Also the links you provided above are both the same, so not entirely sure what I am supposed to compare.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
alexb

Danny

 

The links aren't the same - one is .com and the other is .net!

Share this post


Link to post
Share on other sites
Danny

They're are same, they link to the same page. The visible link you have posted may be .net and .com but they both have the same URL.

 

Also, I have just viewed both sites again on my phone and here is what I am seeing for .net.

 

http://d.pr/i/IM6s

 

However, this is most certainly related to your custom CSS and HTML, which you have added in the textbox. For a start you're using negative margins to position your elements, which you shouldn't do.

If we can have an understanding of what is actually wrong, we may be able to point you in the right direction, but we do not provide support for user created code.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
alexb

Danny - my bad - apologies - not sure why they are pointing to the same url!

 

Negative margins aside (which I know some consider a hack, and some don't) the problem is - in .net the red icon and the main picture are blurred on ipad and iphone when compared with the identical icons I have used on the original Platform Pro version sited on .com

 

Since the uploaded files are identical in both cases I can only assume that it is something in DMS which is causing this to happen.

 

When changing from landscape to portrait mode the elements also take ages to load on the DMS version compared to the Platform Pro version despite the fact that there is less custom CSS used on my DMS...

Share this post


Link to post
Share on other sites
Rob

Alex,

 

You may be right, then again, your assumption may be that we can fix the browser.  I suspect that what's happening is that because of our new systems, and the fact that the other browsers may not have caught up to the advanced code we use in DMS,  the images (which are being scaled) don't have the ability to scale correctly.

 

Okay, view your .com in Firefox.  You'll see the image of Gary and the red icon on the right.  View Image Info by right clicking.  You'll see Gary's image is 540px by 540px, but, the container is only allowing to be 536px by 536px so Firefox is accepting a scaled down version.  Some browsers will not scale like Firefox or Chrome, and particularly mobile browsers will 'crunch' the image into the space, causing it to slightly pixelate (the fuzzy look, because it's only 4px on each side).

 

Now, your red image is 50px by 50px, scaled to 38px square.  So that one's going to get a really bad reaction from those browsers.

 

Solution? Check each browser to see how they're scaling (on your computer, not mobile devices).  If the measures are the same, just open the images in a graphic editor, and resize them manually to the lower size - gary at 536px, for example. Upload and replace the originals. 

 

That should work.  If it doesn't no harm done and we'll look for other options.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×