Hello,
To put it simply, I don’t understand why this site: http://centulatorapp.com scales down and displays properly (at least, with everything proportioned and sitting in the right places) on an iPad or iPhone and this one : http://slikkrlabs.com/PersonalBrandsiPad does NOT.
Can anyone tell me, please, where on earth I’m going wrong here?
Thank you,
Sarah
There are basically two ways to do this: either serve up different styles to different media with the help of @media queries in the CSS, or use some kind of server-side script to sniff out the device and serve up something different to different devices. I suspect the latter is happening for the centulator site, and neither is happening with the slik site.
Hi Ralph, thank you for your reply.
The centulator site has no consideration for mobile devices whatsoever, it just scales by itself.
There are stylesheets in the slikkrlabs one to accommodate portrait/landscape orientation but that’s all. Even if I remove those and the meta viewport tag I still see no autoscaling when i look at that page on an iPhone. In fact, I had to do a lot of tweaking after throwing down a very basic layout, thinking it would jiust work because the damned thing was spilling outside the viewable area on iPad as well!
Did you create the centulator site?
I did, yes.
O, I see, I didn’t actually test this on a small device first. The centulator site is contained within a fixed-width, centered box that keeps everything in one place, whereas the other site isn’t so contained, with content floating all over the place.