apsoda — 2012-02-08T17:09:49-05:00 — #1
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?
ralphm — 2012-02-08T18:15:53-05:00 — #2
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.
apsoda — 2012-02-08T18:33:07-05:00 — #3
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!
ralphm — 2012-02-08T19:00:48-05:00 — #4
Did you create the centulator site?
apsoda — 2012-02-08T19:41:25-05:00 — #5
ralphm — 2012-02-08T21:21:14-05:00 — #6
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.