January 12, 2016

Responsive Quirk in iOS9

When I started building the software that runs this blog, obviously I wanted it to work on people's mobile devices, it would be crazy to not think about this, so I chose a blog theme that was responsive in the demo and got to work making it so it could be what I wanted. Imagine my surprise when I went to look at my work on my phone and this is what I saw.

Unexpected way to be broken

Strangely my content was not filling the screen as I expected on my phone, so I started doing some searching on Google. What I discovered is, that if you have a width that is explicitly wider than the viewport on iOS9 then instead of being forced outside the screen as I'd expect, like below:

Expected way to be broken

the content for the rest of the page shrinks down so that the too wide part can fit on the screen.

It turns out I had been a little lazy when I was putting the comments section together, and instead of using a width in CSS for the text area for people to fill in comments, I had just slapped rows and cols attributes directly on the text area and not thought to go back and do it properly as I wanted to get it all together and out.

I guess the moral of the story is, do things properly as often as you can, even things that seem like they don't really matter because it can come back to bite you otherwise. Also check everything before you go to production. I had to go back through my site's code and figure out why this was happening so I could get a Mobile Friendly tag on Google.