IPad3 - desktop layout

Hi,

I am very happy with this Bikestore responsive template.
Works great.

Only one question:
When visiting my site on an iPad3 I see the mobile menu (I do not know whether it is tablet/mobile view).
I would like to see the desktop view when on landscape and on portait I would like the tablet layout (with mobile menu).

My Layout settings are:
- tablet width: 900px
- mobile width: 540px

How can I achieve this?

Kind Regards,

Jan

We have found last time a propblem with iPad3 - it was loading mobile.css code instead of the tablet.css code. Please try to implement this fix in the lib/framework/layout.helper.php - below are two lines to replace:

Code: Select all

       // set media query for the tablet.css
       $this->API->addCSS($this->API->URLtemplate() . '/css/tablet.css','text/css','only screen and (max-width: '.$tablet_width.'px), only screen and (max-device-width: '.$tablet_width.'px) and (-moz-max-device-pixel-ratio: 1.5), only screen and (max-device-width: '.$tablet_width.'px) and (-o-max-device-pixel-ratio: 1.5/1), only screen  and (max-device-width: '.$tablet_width.'px) and (-webkit-max-device-pixel-ratio: 1.5), only screen and (max-device-width: '.$tablet_width.'px) and (max-device-pixel-ratio: 1.5), only screen and (max-device-width: '.($tablet_width).'px) and (-moz-min-device-pixel-ratio: 2), only screen and (max-device-width: '.($tablet_width).'px) and (-o-min-device-pixel-ratio: 2/1), only screen and (max-device-width: '.($tablet_width).'px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-device-width: '.($tablet_width).'px) and (min-device-pixel-ratio: 2)');
       // set media query for the mobile.css
       $this->API->addCSS($this->API->URLtemplate() . '/css/mobile.css','text/css','
       (max-width: '.$mobile_width.'px) and (max-device-pixel-ratio: 1.5),
       (max-device-width: '.$mobile_width.'px) and (-moz-max-device-pixel-ratio: 1.5),
       (max-device-width: '.$mobile_width.'px) and (-o-max-device-pixel-ratio: 1.5/1),
       (max-device-width: '.$mobile_width.'px) and (-webkit-max-device-pixel-ratio: 1.5),
       (max-device-width: '.$mobile_width.'px) and (max-device-pixel-ratio: 1.5),
       (max-device-width: '.($mobile_width).'px) and (-webkit-min-device-pixel-ratio: 2),
       (max-device-width: '.($mobile_width).'px) and (-moz-min-device-pixel-ratio: 2),
       (max-device-width: '.($mobile_width).'px) and (-o-min-device-pixel-ratio: 2/1),
       (max-device-width: '.($mobile_width).'px) and (min-device-pixel-ratio: 2)');

Hi,

Thank you.
I guess this is the same issue as with MeetGavernWP (Wordpress) them.
I found your remark there, changing two lines as well.

I changed the lines that you suggested and I get the desktop layout on my tablet now.
However, these is the same for portrait and landscape mode.
I would like to have a different layout on portait mode.
Is that possible with the layout settings?

I played with these settings, but it seems that I can only can achieve the same layout for portrait and landscape mode.

Unfortunately there is no option to define two different layouts for tablets. You can achieve this creating your own CSS file and using media queries.

Thanks,

I will look into it.
I guess perhaps it should be possible to find the right @media / viewport (width/device-width) query.

Thanks again.

JB

The above fix still isn't working for me...after above, the mobile view only loads the tablet version. Can you revise the code for this?

@klattr1 - are you sure that you have applied property the code change? What width do you have set for the mobile devices?

I've checked this change with mobile width 540px, and it works fine on my iPhone 4S with retina display - it loads correctly the mobile.css code.

I copied the code above you suggested and replaced it over lines 73-76 in "helper.layout.php".

Here's lines 73-76 before the mod you suggested:

Code: Select all

// set media query for the tablet.css
       $this->API->addCSS($this->API->URLtemplate() . '/css/tablet.css','text/css','only screen and (max-width: '.$tablet_width.'px), only screen and (max-device-width: '.$tablet_width.'px) and (-moz-max-device-pixel-ratio: 1.5), only screen and (max-device-width: '.$tablet_width.'px) and (-o-max-device-pixel-ratio: 1.5/1), only screen  and (max-device-width: '.$tablet_width.'px) and (-webkit-max-device-pixel-ratio: 1.5), only screen and (max-device-width: '.$tablet_width.'px) and (max-device-pixel-ratio: 1.5), only screen and (max-device-width: '.($tablet_width * 2).'px) and (-moz-min-device-pixel-ratio: 2), only screen and (max-device-width: '.($tablet_width * 2).'px) and (-o-min-device-pixel-ratio: 2/1), only screen and (max-device-width: '.($tablet_width * 2).'px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-device-width: '.($tablet_width * 2).'px) and (min-device-pixel-ratio: 2)');
       // set media query for the mobile.css
       $this->API->addCSS($this->API->URLtemplate() . '/css/mobile.css','text/css','only screen and (max-width: '.$mobile_width.'px), only screen and (max-device-width: '.$mobile_width.'px) and (-moz-max-device-pixel-ratio: 1.5), only screen and (max-device-width: '.$mobile_width.'px) and (-o-max-device-pixel-ratio: 1.5/1), only screen  and (max-device-width: '.$mobile_width.'px) and (-webkit-max-device-pixel-ratio: 1.5), only screen and (max-device-width: '.$mobile_width.'px) and (max-device-pixel-ratio: 1.5), only screen and (max-device-width: '.($mobile_width * 2).'px) and (-moz-min-device-pixel-ratio: 2), only screen and (max-device-width: '.($mobile_width * 2).'px) and (-o-min-device-pixel-ratio: 2/1), only screen and (max-device-width: '.($mobile_width * 2).'px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-device-width: '.($mobile_width * 2).'px) and (min-device-pixel-ratio: 2)');

Does the "mobile" part of the code snippet you gave need the "only screen and" function in between instead of just "and"?

on which device do you have a problem?

on which device do you have a problem?

I've tried it on a Samsung Galaxy S3 and also resized the browser window down to the min pixel width of the smartphone setting and had the same problem (it still never loaded the mobile code)

Ok I got the reason of your problems.

iPad 3 uses the 1024x768 resolution for media queries - the android devices don't decrease the real resolution.

The solution is included in the following code:

Code: Select all

// it is iPad, iPod or iPhone?
       $iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
       $iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
       $iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
       // set media query for the tablet.css
       if($iPod || $iPhone || $iPad) {
          $this->API->addCSS($this->API->URLtemplate() . '/css/tablet.css','text/css','only screen and (max-width: '.$tablet_width.'px), only screen and (max-device-width: '.$tablet_width.'px)');   
       } else {
          $this->API->addCSS($this->API->URLtemplate() . '/css/tablet.css','text/css','only screen and (max-width: '.$tablet_width.'px), only screen and (max-device-width: '.$tablet_width.'px) and (-moz-max-device-pixel-ratio: 1.5), only screen and (max-device-width: '.$tablet_width.'px) and (-o-max-device-pixel-ratio: 1.5/1), only screen  and (max-device-width: '.$tablet_width.'px) and (-webkit-max-device-pixel-ratio: 1.5), only screen and (max-device-width: '.$tablet_width.'px) and (max-device-pixel-ratio: 1.5), only screen and (max-device-width: '.($tablet_width * 2).'px) and (-moz-min-device-pixel-ratio: 2), only screen and (max-device-width: '.($tablet_width * 2).'px) and (-o-min-device-pixel-ratio: 2/1), only screen and (max-device-width: '.($tablet_width * 2).'px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-device-width: '.($tablet_width * 2).'px) and (min-device-pixel-ratio: 2)');
       }
       // set media query for the mobile.css
       if($iPod || $iPhone || $iPad) {
          $this->API->addCSS($this->API->URLtemplate() . '/css/mobile.css','text/css','
          only screen and (max-width: '.$mobile_width.'px), only screen and (max-device-width: '.$mobile_width.'px)');
       } else {
          $this->API->addCSS($this->API->URLtemplate() . '/css/mobile.css','text/css','
          only screen and (max-width: '.$mobile_width.'px),
          only screen and (max-device-width: '.$mobile_width.'px) and (-moz-max-device-pixel-ratio: 1.5),
          only screen and (max-device-width: '.$mobile_width.'px) and (-o-max-device-pixel-ratio: 1.5/1),
          only screen and (max-device-width: '.$mobile_width.'px) and (-webkit-max-device-pixel-ratio: 1.5),
          only screen and (max-device-width: '.$mobile_width.'px) and (max-device-pixel-ratio: 1.5),
          only screen and (max-device-width: '.($mobile_width * 2).'px) and (-webkit-min-device-pixel-ratio: 2),
          only screen and (max-device-width: '.($mobile_width * 2).'px) and (-moz-min-device-pixel-ratio: 2),
          only screen and (max-device-width: '.($mobile_width * 2).'px) and (-o-min-device-pixel-ratio: 2/1),
          only screen and (max-device-width: '.($mobile_width * 2).'px) and (min-device-pixel-ratio: 2)');
}


In the file helper.layout.php

Could you test it on your device? I've checked it on the android emulator configured as HTC One X.

That fixed it for me! Thanks.

Thanks for this information - we'll implement this fix in our other templates and themes

Thanks,

I implemented the new code in my "bikestore" site as well.
This seems to work well.

Only question.
I am working on another site bassed on new Gamenews template (great!).
I implemeted the code in that template as well.
But I cannot make this work: On Ipad I want to show the desktop view, but I cannot get that to work.

Am i on the wrong road here?

Thanks,

Jan

the only way is decreasing the tablet width to 767. But I don't recommend it, because you can have a problems with the mainmenu on the touch screens.

Thanks,

But on Bikestore I can get the tablet to show the desktop version.
But on Gamenews I am not able to.

I will try to play with the tablet size.

Jan

In the bikestore there is no menu change between tablet and desktop, only layout changes.

[quote="dziudek"]Ok I got the reason of your problems.

iPad 3 uses the 1024x768 resolution for media queries - the android devices don't decrease the real resolution.

The solution is included in the following code:

Code: Select all

// it is iPad, iPod or iPhone?
       $iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
       $iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
       $iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
       // set media query for the tablet.css
       if($iPod || $iPhone || $iPad) {
          $this->API->addCSS($this->API->URLtemplate() . '/css/tablet.css','text/css','only screen and (max-width: '.$tablet_width.'px), only screen and (max-device-width: '.$tablet_width.'px)');   
       } else {
          $this->API->addCSS($this->API->URLtemplate() . '/css/tablet.css','text/css','only screen and (max-width: '.$tablet_width.'px), only screen and (max-device-width: '.$tablet_width.'px) and (-moz-max-device-pixel-ratio: 1.5), only screen and (max-device-width: '.$tablet_width.'px) and (-o-max-device-pixel-ratio: 1.5/1), only screen  and (max-device-width: '.$tablet_width.'px) and (-webkit-max-device-pixel-ratio: 1.5), only screen and (max-device-width: '.$tablet_width.'px) and (max-device-pixel-ratio: 1.5), only screen and (max-device-width: '.($tablet_width * 2).'px) and (-moz-min-device-pixel-ratio: 2), only screen and (max-device-width: '.($tablet_width * 2).'px) and (-o-min-device-pixel-ratio: 2/1), only screen and (max-device-width: '.($tablet_width * 2).'px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-device-width: '.($tablet_width * 2).'px) and (min-device-pixel-ratio: 2)');
       }
       // set media query for the mobile.css
       if($iPod || $iPhone || $iPad) {
          $this->API->addCSS($this->API->URLtemplate() . '/css/mobile.css','text/css','
          only screen and (max-width: '.$mobile_width.'px), only screen and (max-device-width: '.$mobile_width.'px)');
       } else {
          $this->API->addCSS($this->API->URLtemplate() . '/css/mobile.css','text/css','
          only screen and (max-width: '.$mobile_width.'px),
          only screen and (max-device-width: '.$mobile_width.'px) and (-moz-max-device-pixel-ratio: 1.5),
          only screen and (max-device-width: '.$mobile_width.'px) and (-o-max-device-pixel-ratio: 1.5/1),
          only screen and (max-device-width: '.$mobile_width.'px) and (-webkit-max-device-pixel-ratio: 1.5),
          only screen and (max-device-width: '.$mobile_width.'px) and (max-device-pixel-ratio: 1.5),
          only screen and (max-device-width: '.($mobile_width * 2).'px) and (-webkit-min-device-pixel-ratio: 2),
          only screen and (max-device-width: '.($mobile_width * 2).'px) and (-moz-min-device-pixel-ratio: 2),
          only screen and (max-device-width: '.($mobile_width * 2).'px) and (-o-min-device-pixel-ratio: 2/1),
          only screen and (max-device-width: '.($mobile_width * 2).'px) and (min-device-pixel-ratio: 2)');
}


dziudek,

I know this is about a month old, but have these changes made it into ver. 3.5.1 of the Bikestore template?
The reason for asking is, that I still have this problem on 3.5.1 - and if I implement a combination of the 2 fixes above, I do get the problem solved on iPad 3 - but then I get no mobile version on my Android phone (LG 4x HD with res. 720x1280px) which gives problems displaying my site (http://www.macstickers.dk) in portrait mode.

Could I trouble you for a post containing a patched version of the helper.layout.php file for the bikestore template, which works with both smartphones, iPads and Desktops just to be sure i'm not making errors here?

Cheers,
Zorroson

We have the newest version which is pretty simple and should work everywhere:

Code: Select all

       $this->API->addCSS($this->API->URLtemplate() . '/css/tablet.css','text/css','(max-width: '.$tablet_width.'px)');   
       // set media query for the mobile.css
       $this->API->addCSS($this->API->URLtemplate() . '/css/mobile.css','text/css','(max-width: '.$mobile_width.'px)');


We have the newest version which is pretty simple and should work everywhere:

Code: Select all

       $this->API->addCSS($this->API->URLtemplate() . '/css/tablet.css','text/css','(max-width: '.$tablet_width.'px)');   
       // set media query for the mobile.css
       $this->API->addCSS($this->API->URLtemplate() . '/css/mobile.css','text/css','(max-width: '.$mobile_width.'px)');


Brilliant,

This seems to work on all platforms and resolutions!
Many thanx for this very fast answer

Cheers,
Zorroson