XF 1.4 Question about responsive design

[Amin Sabet]

My question relates to how my sites (using mildly customized default XF 1.4 style) render on my phone (iPhone 6 Plus) vs my small tablets (Nexus 7, iPad Mini).

I have read this resource and the accompanying discussion: https://xenforo.com/community/resources/responsive-design.2193/

iPhone 6 Plus renders at 1242 × 2208 pixels
Nexus 7 (later model) renders at 1200 x 1900 pixels

Here is how my site looks on iPhone 6 Plus (left) compared with Nexus 7 (right)



You can see how the avatar and member info are shown above the message text on the phone, and to the left of the message text on the tablet. On the tablet, the message text looks quite small at normal reading distances.

What I'd like is for the small tablets (7" Android tabs, iPad Mini), when used in portrait orientation, to render like a phone. How can I accomplish this?

 

[Paul B]

Change the trigger point settings as listed in the resource.

https://xenforo.com/community/attachments/upload_2013-8-9_17-8-18-png.53655/

 

[Amin Sabet]

Change the trigger point settings as listed in the resource.

https://xenforo.com/community/attachments/upload_2013-8-9_17-8-18-png.53655/

But my phone and tablet both have similar width (1242px vs 1200px), and my values are all set well below 1200px, so why are they behaving differently than one another?

 

[Paul B]

The iPhone has less pixels than the screen width suggests.

 

[Amin Sabet]

The iPhone has less pixels than the screen width suggests.

It gets down-res'd to 1080px wide, but that is still greater than the 800px I have set for Max Responsive Width (Wide).

 

[Paul B]

http://codemotionapps.com/wp-content/uploads/2014/09/iphone6-plus-screen-size-ppi-@3x-ios8.jpg

 

[Martok]

The screensize in pixels that a device has is not the same as the viewport size.

You can see the viewport sizes for different devices here:

http://viewportsizes.com

You can find the viewport size of the device you are using here:

http://viewportsizes.com/mine/

 

[Amin Sabet]

http://codemotionapps.com/wp-content/uploads/2014/09/iphone6-plus-screen-size-ppi-@3x-ios8.jpg

The screensize in pixels that a device has is not the same as the viewport size.

You can see the viewport sizes for different devices here:

http://viewportsizes.com

You can find the viewport size of the device you are using here:

http://viewportsizes.com/mine/

I changed all the trigger points to 1540 and still can't get the Nexus 7 to switch. Could one of you tell me the trigger point settings to use so that all of the 7-8" tabs will render like a phone?

 

[Martok]

Nexus 7 (2012 version) has a viewport size of 601 x 962. You can use the link in my last post to test on your devices (Nexus 7 2013 in your case) to find the trigger points.

 

[Paul B]

A very useful link @Martok, thanks.

 

[Amin Sabet]

Nexus 7 (2012 version) has a viewport size of 601 x 962. You can use the link in my last post to test on your devices (Nexus 7 2013 in your case) to find the trigger points.

A very useful link @Martok, thanks.

I'm not lazy, I'm clueless. But I can't seem to use this knowledge:

"Nexus 7 (2012 version) has a viewport size of 601 x 962"

to find a trigger point setting that works for what I am trying to do.

My current trigger point settings are the default 800px/610px/480px/976px. I've tried setting them much higher (1540px/1540px/1540px/1540px), and I've tried setting them lower. No matter what I enter, the Nexus 7 doesn't render like a phone. Can you suggest numbers for me to replace those four numbers with?

 

[Martok]

Can you suggest numbers for me to replace those four numbers with?

No, you need to do that after using the site I linked to. I don't have your devices so don't know the viewport sizes.

 

[Amin Sabet]

No, you need to do that after using the site I linked to. I don't have your devices so don't know the viewport sizes.

Thanks, I understand now. Using that site, I found the following viewport widths for my devices:

iPad (all types): 768
Nexus 7 (newest): 600
iPhone 6 Plus: 414

In order to get all of these devices to render as desired (with the narrow responsive layout), I had to set Max Responsive Width (Narrow) to "800"

Can anyone explain how the medium responsive layout differs from the wide responsive layout when using the default XenForo 1.4 style? These settings seem to give me the results I wanted:

 

[Martok]

Medium responsive width is the first one that puts the sidebar below the forums.

The easiest thing to do is look at this forum and slowly decrease your browser width on your PC to see the 3 different responsive looks.

Regarding your settings, you probably won't want all of the responsive settings set to 800. I'd expect to see differing views on tablets, PC and phones due to their differing viewport sizes.

 

[Amin Sabet]

Medium responsive width is the first one that puts the sidebar below the forums.

The easiest thing to do is look at this forum and slowly decrease your browser width on your PC to see the 3 different responsive looks.

Regarding your settings, you probably won't want all of the responsive settings set to 800. I'd expect to see differing views on tablets, Post and phones due to their differing viewport sizes.

Got it. Thanks, again!