Layout problems on iPhone 5 about evothings-examples

[mikaelkindborg]

Some more findings:

• The above test cases pass on iOS 8 (tested on iPad Mini).
• The issue with the white horizontal space above of the header bar might be related to displaying the keyboard, then pressing CONNECT in "Arduino LED On/Off TCP". This could be the case also in other examples that display the keyboard.

[Sionarch]

Confirming these issues occur in iOS 7 but not in iOS 8.

Viewport size relative units bug
WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=131863
(Ugly) workaround: https://github.com/rodneyrehm/viewport-units-buggyfill

Fixed position header bug
Probable WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=132537
Found only workarounds that uses ugly JavaScript code, except this one which I haven't confirmed working.

I refrain from using "polyfills" and "buggyfills" and in general from using JavaScript to fix these layout issues. This will clutter the example's code and is a bad incentive for future development work. As the bugs have been fixed in the Mobile Safari used in iOS 8, I recommend not fixing them for iOS 7.

Alternative ways of solving the issue relating to viewport relative units:

• Use media queries targeting iPad and iPhone devices based on their screen dimensions and css pixel density, as per e.g. http://cssmediaqueries.com/target/iPhone+4.html . This will also target devices running iOS 8.
• Use simple line of JavaScript changing the base font size e.g. "if (/iP(hone|ad|od).*OS 7/.test(navigator.userAgent)) document.body.style.fontSize='50px'". The downside is that this has to be put in all example apps and will clutter their code.

[mikaelkindborg]

Can we use viewport size for context (document text) and e.g. px size for the header?

[Sionarch]

A workaround to the viewport relative sizes related issue using the previously mentioned simple JavaScript line of code has been added to evothings-examples evothings.js, see #89 .

[mikaelkindborg]

This have been verified to work in an iPhone 4S with iOS 7. Also tested iPad Mini iOS 8 and Nexus 7 which works as expected.

Closing issue.