Posted by drew reece on November 22, 2011 at 5:59pm
Is there a way to prevent mobile devices seeing the 1 column Omega layout?
I like the responsive scaling but images are a problem. I haven't found a clean & reliable way to scale them to fit the 320px layout that is sent to smaller devices. Since the images will be sent full size it seems pointless to resize them on the device via javascript.
I think it is a reasonable solution to send a narrow 720px layout version of the site to mobile devices.
How can I get an Omega subtheme to not send the 1 column version to smaller devices?
For a working example check out Acquia.com :)
Comments
this can be achieved by
this can be achieved by changing the media query under Appearance > your_subtheme > Grid settings.
Just change the narrow media query to 320 instead of 740.
You might want to play around with it a little more to get it like you want it.
Almost works…
Thanks,
It almost works, iOS Safari will now use the narrow layout but the page refuses to zoom out to show the full width of the page. Having scaling active in the viewport settings allows zooming out (to a point) but it pops back to what looks like a 320px view area over the full page width. Perhaps the viewport scale needs to be less than 1.0?
I'll try unpicking Acquia's css.
Uncheck "Allow customizing
Uncheck "Allow customizing viewport meta properties on iOS and Android devices"
Have tested this now on iPhone, and it seems to get you where you want, but the margins become very wide as default. Maybe you can play around with the min-width and min-device-width to get where you want.
That's as far as I got. It's
That's as far as I got.
It's good to know that you are seeing the wide margins too, I was suspecting it was my sub theme. I need Firebug for iPhone to see what elements are expanding the page :)
FWIW I have the Omega tools debug features off, so they can't be interfering. Specifying different values in the narrow Media query settings doesn't have any effect. Drupal, css & js caching is off so perhaps Safari is caching like crazy.
When you resize you desktop
When you resize you desktop browser, just at the breakpoint between normal and narrow (viewport 925px), there are also big margins, it seems like this breakpoint is what the iOS displays.
In the included styles, everything in the grid is displayed in pixels, so you could probably try to modify alpha-default-narrow-12.css and make the container (.container-12) percentage or maybe width 900px values.
Or you can try to keep the default media-queries and copy the contents of alpha-default-narrow-12 into alpha-mobile.css and modify from there.
I see, My
I see,
My CUSTOMTHEME-omega-alpha-default-narrow.css is being overridden by alpha-default-narrow-12.css. So I can't get around this without hacking the alpha parent theme?
I need to dig a little more into this.
Thanks for the help hanspin.
Seems like the solution can
Seems like the solution can be:
Uncheck Allow customizing viewport meta properties on iOS and Android devices
Enable Fluid grid and set media query to something like:
all and (min-width: 320px) and (min-device-width: 320px), (max-device-width: 720px) and (min-width: 320px) and (orientation:landscape)
Seems to work well on iPhone at least. You can also disable narrow layout if you want to and use the fluid all the way up to normal.