CSS Weirdness: 1 iPad, 2 forums, same code, different results

[GL700Wing]

I manage two SMF 2.0.15 forums I've implemented exactly the same CSS 'media' class codes (at the end of the relevant index.css files) on both and made the same changes to the MessageIndex.template.php and Recent.template.php files to use the 'media' class codes to hide the post/message icons and the replies/views column for smaller resolutions but despite this the two forums display differently on my iPad.

When I use my iPad in landscape mode on the first forum the post/message icons and the replies/views column are visible and in portrait mode they are hidden - this is the behaviour I expect.

However, when I use my iPad in landscape mode on the second forum the post/message icons and the replies/views column are also hidden - this is not the behaviour I expect.

Can anyone offer any insight into what may be causing this issue?


I've attached screen shots taken with my iPad of how 'Unread Topics' display on each forum in both portrait and landscape mode.

[Gwenwyfar]

What code gets applied where is decided on the width you define in your queries. No weirdness there. If you're looking to make it look in a specific way in a specific device you're going to have a hard time.

[GL700Wing]

I just worked out the reason for the difference in iPad display between the two forums - for the second forum I needed at add the 'viewport' meta tag to the index.template.php file as follows:

Find:

Code Select Expand

<title>', $context['page_title_html_safe'], '</title>';

Add Before:

Code Select Expand

<meta name="viewport" content="width=device-width, initial-scale=1">

The second forum is now displaying on my iPad as I expect.

[Gwenwyfar]

Viewport should be there always if you're working with adaptive css.

[GL700Wing]

Viewport should be there always if you're working with adaptive css.

Thanks - I'm new to CSS and still learning!

[Wheelwright]

Why exactly is that, Gwenwyfar? I'm just curious. I'm also new to css.

[Gwenwyfar]

Why exactly is that, Gwenwyfar? I'm just curious. I'm also new to css.

It changes the default zoom/scale used when a page is loaded and tells it to use the device width. You can read about it in detail here. There are other properties for the viewport tag too, but they aren't as useful.

When you don't set a standard for these two, you have things like landscape having a different scale than portrait, or the device simply loading a weird scale altogether.