Force Mobile Version on iPad

tonex

I need to force mobile theme on ipad. I read this.

I need a similar solution for ipad. I tried updating /library/core/functions.general.php:

if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|opera m|kindle|webos|mobile)/i', $UserAgent))

or

if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|opera m|kindle|webos|ipad)/i', $UserAgent))

Both won't work.

tonex

iPad's user agent is similar to : Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

This is not the latest version of iPad, I just googled it.

422

Why would you force mobile version on ipad? Really curious

tonex

My background image is fixed. Somehow, a 2400 x 1165 image is still small for an ipad screen (won't fill the whole screen).

422

Then auto scale it.

x00

The simplest way is to create a div before #Frame then absolute/fixed position it top:0

inside place an img with width="100%" (I'm deliberately not using css techniques). You could also have an additional cover div after that, though arguably #Frame does that job. z-index shouldn't be need.

There is css techniques to achieve this, but universal support is not there for backgrounds that scale.

tonex

Scaling it stretches the background image to ugliness. : )

422

Then change your image lol. You can scale images using jquery, we use technique on www.tranced.com.au

tonex

How about the force to mobile theme option? Not possible?

422

I think the user agent string is fqd in ipads, try http://davidwalsh.name/detect-ipad

tonex

fqd? Strange.

Todd

We've decided that an ipad is not a mobile version and I don't recommend you try and force it.

What I do recommend is that you target the ipad specifically with css media queries. Here is the css for an ipad:

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

If you really must have a giant static background image then consider using the background-size attribute within your media query.

tonex

Thanks, Todd. I'll try that one.