Mobile layout trouble

Mandrak134 · January 4, 2020, 11:30am

Dear all,

I created a mobile web site which talk about a travel at Lisbon.
In the preview mode with Safari on Mac all is OK

When I upload on my website, the layout of a page is different with troubles :

You can see the result on the website : https://cluns197.fr/
To see troubles follow this way :

Tap menu icon
Tap “Guide de voyage”
Tap" Baixa, Chiado, Barrio Alto"
Scroll and see troubles in the page

I send you the hype files in order to analyse it :
WDP Lisbonne.zip (2.1 MB)

I tested it on iPhone XS and iPhone XR. The issue is on both mobile devices.
But never appears on a Mac.

Thanks for your support.

h_classen · January 4, 2020, 4:05pm

that’s the weakness of absolute positioning …

one approach:

try to let as much space as possible

add this script on sceneload which will check a given class’ elements for overflow and makes the fontSize as small to adapt the given height …

 function isOverflown(element) {
 const overflow = element.scrollHeight > element.clientHeight;

 if(overflow){
 const newFontSize = (parseInt(element.style.fontSize) - 1) + 'px';
 element.style.fontSize = newFontSize;
 isOverflown(element);
 }
     
  return
 }

 const classToCheck = 	'checkForOverFlow';
 const sceneEl = document.getElementById(hypeDocument.currentSceneId());
 const divsToCheckOverflow = sceneEl.querySelectorAll('.' + classToCheck);

 divsToCheckOverflow.forEach(
 function(el){
 isOverflown(el)
 }
 )

MaxZieb · January 4, 2020, 8:31pm

This issue shouldn’t appear. It seems related to some line height or font issue. Hans code solution should fix the symptoms but it doesn’t address the core problem. Either the iPhone doesn’t have the correct font or is changing the line height. The text boxes and other elements are not scaled and only pinned to top left so this shouldn’t happen to begin with. I’d had a similar problem recently and using Helvetica Neue (Light) instead of Helvetica (Light) fixed it for me.

h_classen · January 4, 2020, 9:10pm

Hm, interesting. The Font is listed as iOS-font. What about Hyphenation?

h_classen · January 5, 2020, 7:57am

the line-hight is inherit from the scene and ‘normal’.
if you want 18px Hype does not seem to change it and uses normal.

so you may be better of to set the line-heigth via css.
possibilities:
https://www.w3schools.com/cssref/pr_dim_line-height.asp

don’t forget ‘!important’ to overwrite Hypes settings!

may help for more consistent results …

h_classen · January 5, 2020, 8:31am

ups … saved the edit