Issues with forum layout on iPad

HTML & CSS
1

We just upgraded to the latest version of our board software and are in the process of trying to replicate our old theme, which includes an added sidebar.

On the previous version of the board, this theme worked fine on an iPad. Now, however, the site displays much too large, showing only a fraction of the page.

Any thoughts on what might be going on? Forum is at asoiaf.westeros.org

The CSS that I add that affects the structure is as follows:



#Wrapper {
margin:0 auto;
padding:0;
position:relative;
text-align:left;
width:100%;
}  

#Main {
clear:both;
overflow:hidden;
position:relative;
width:100%;
}

#MainLeft {
display:inline;
float:left;
padding:220px 5px 0px 5px;
position:relative;
width:190px;
z-index:5; 
}

#MainMiddle {
display:inline;
float:left; 
margin-right:-200px;
position:relative;
width:100%;
z-index:1;
}

#MainMiddleInner {
margin:0px 200px 0px 0px;
min-height:0;
overflow:hidden;
}

#MainClearFix {
clear:both;
height:1px;
margin-top:-1px;
overflow:hidden;
}

#MainLeftFix {
background:#D3A664 url({style_images_url}/bg_parchment.png) repeat;
bottom:0;
left:0px;
position:absolute;
width:200px;
z-index:0;   
}

#MainMiddleFix {
bottom:0;
left:200px;
position:absolute;
right:0px;
z-index:0; 
}

#HeaderMain {
background:#D3A664 url({style_images_url}/bg_parchment.png) repeat;
}

#HeaderShield {
background:transparent url({style_images_url}/header_shield-asoiaf.png) no-repeat;
height:150px;
left:5px;
position:absolute;
top:25px;
width:190px;
}

#HeaderSide {
background:transparent url({style_images_url}/forum_header_side.png) no-repeat;
height:100%;
position:absolute;
top:0px;
width:200px;
}

#HeaderTop {
background:transparent url({style_images_url}/forum_header_top.png) no-repeat;
z-index:5;
}

html>body #MainLeftFix, html>body #MainMiddleFix {
top:0
}

I do have a feeling the added code could be simplified; I basically pulled it from our main site (Westeros: The ‘A Song of Ice and Fire’ Domain) and made it a single sidebar instead of two, but I am not sure what (if anything) could be stripped out.

2

It sure would be nice just to be able to download the simulator. The rest is of no interest to me.

3

Welcome to the absolute HELL that is xCode… where they expect you to download 8 gigs a month for a crappy IDE, a lexical compiler with some language templates and one emulator. RIGHT.

You should try actually writing real code with it – possibly the WORST development suite EVER.

4

Thank you for the replies! Setting the initial-scale did indeed turn out to be the solution. :slight_smile:

5

Hm, my version is slightly older. So, do I want to download another 8GB version …? (Rubs chin dubiously …)

6

That’s very weird. For me, on the emulator, the site is blown up hugely, so that you can only see the logo in the top left corner. (I thought you and I were using the same emulator, Paul!)

PS: the emulator certainly isn’t perfect. I’ve found a few differences between it and the iPads I’ve checked in-store. :frowning:

7

Yes I uploaded the new version when you mentioned that ipad support had been added. I’m using version 4.3 (238.2) and it shows that forum page very nicely.

8

It seems to look ok on the ipad emulator which is supposed to be accurate.

9

You could try putting either of these in the head of your pages:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

This seems a similar issue to what’s described here:

Worth a shot, anyhow.