Site does not support all device screen widths

[kastork]

As with most sites employing fixed-width responsive designs, the new groovy site isn't friendly to all devices. For example, on an iPad mini retina in portrait orientation, the site is rendered too wide for the device rather than flowing text to the browser's actual width. Consequently, the reader is constantly having to move the page from left to right and back again just to finish reading a sentence.

This would not be a problem if normal pinch-zooming, or double-tap zooming worked, but they don't.

[glaforge]

I don't have an iPad mini Retina to test that :-( Do you know how to make that work nicely for your iPad?

[kastork]

I'm not a designer, and my css knowledge is limited -- so I can't be too much help.

I thought that putting Firefox in responsive design mode would give a way to demonstrate, but it doesn't. You can create a view that has the right width (1536px), but the rendering results don't match what happens on the actual device.

Chrome's device emulation is a little better (for example if you ask for a Galaxy 5, it shows how the page footer is not flowed properly but continues off the right edge of the screen. But in the case of the Galaxy, the iframe with the main text does flow properly in this emulator.) I don't see a mini retina emulator in chrome and the iPhone 5 emulator doesn't exhibit the problem I see on my iPhone 5S (which is the same as with the Mini Retina).

In Chrome's device emulator you can also spoof the user agent. I tried this with my iPad's value

Mozilla/5.0 (iPad; CPU OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) CriOS/36.0.1985.57 Mobile/11D257 Safari/9537.53

But even with this and the proper width set, chrome doesn't exhibit the text flow problem.

I'm wondering if the use of iframes is part of this problem -- but I'm just speculating.

[paulk-asert]

Please reopen at apache/groovy-website if still a problem.