BD on iPhone

DV8 · Post by **DV8** » Sat Aug 13, 2011 8:40 am

I just wanted to let you know that bulldrek doesn't render very well on the iPhone and perhaps also on Safari. The bottom menu sort of hangs half way on the screen and the top of the page is hidden underneath some black square. If you care to fix that I can provide with some screen shots. Let me know.

3278 · Post by **3278** » Sun Aug 14, 2011 3:34 pm

That's interesting. This is a known issue on Android, as well - Browser doesn't seem to handle the positioning CSS properly, although I can't figure out why - but I wouldn't have guessed it also effects the iPhone. Originally the solution was to use the [stripped] template, but it now also uses positioning CSS to fix its top border in place.

The [mobile] template is supposed to be the solution to all these problems: a specific template for smaller screens, yay! Except on Android, anyway, it renders an enormous empty background with text taking up a tiny portion of it. There's just got to be something in the CSS that I'm missing, or some aspect of Browser [and the iPhone browser, as well, apparently] that I don't grasp.

What I'd really like is a native Bulldrek app for iPhone and Android, but that would be a completely ludicrous project for virtually no benefit to the users. Still...

I'll keep working on [mobile], and hope that Apple and Google will keep working on their CSS compatibility. It's hard to imagine any of this is on them, though; it's got to be something I'm just not seeing.

3278 · Post by **3278** » Wed Sep 17, 2014 11:21 pm

Hey, is this fixed now? I'm getting the correct rendering on Chrome for Android, but I don't have an iDevice to test this on. What're you seeing now?

3278 · Post by **3278** » Fri Sep 26, 2014 4:54 pm

Oh, poop. Well, that broke something else - visibility when scrolling - so I'll have to fix that.

3278 · Post by **3278** » Mon Sep 29, 2014 3:55 am

Okay, now try it. Going to try writing some responsive CSS that'll collapse the right header links below the left header image, in what I like to call my "spare time."

Bishop · Post by **Bishop** » Fri Oct 03, 2014 4:36 pm

Can't help ya there, bud.....last Apple product I owned was an Apple IIC.

3278 · Post by **3278** » Sat Oct 11, 2014 3:00 am

Fixed the header transparency, so it should be "good enough" for the moment, although I'd still like to use @media to resize the header elements for portrait-orientation mobile.

3278 · Post by **3278** » Sat Oct 11, 2014 4:33 am

Wrote a nice little @media setup to give different versions to browsers, but all of the browsers I tried seemed to be using a very different viewport than the one their resolution would suggest. Used (orientation: portrait), but it didn't really make a difference: mobile screens still render the page very, very small, and didn't benefit from the mobile-design stacked header. Clearly I need to learn some more about how mobile browsers are rendering the page.

But all the header visibility and footer positioning stuff should work right now. Basically the site should look the same on mobile as it does on desktop. Also took advantage of the chance to redo the layout of the header with a div or two, rather than tables, although a lot of tables are still in use. What I wouldn't give to redesign a phpBB installation with CSS3 and HTML5.