When testing across various browsers (Safari, Firefox, Chrome) I have found that out of the 3, Google Chrome displays everything smaller.
Either that or Chrome is displaying correctly and Safari and Firefox are displaying to big. This is in terms of text size as well as images and other elements.
Hoping that there is a work around for this as I would prefer it to remain consistent across all browsers.
If this doesn't help could you provide an example Hype document with your problems, it makes things so much easier to troubleshoot over long distances.
I have been looking into this myself since posting here and have started to get closer to a solution I believe.
I looked back at previous projects to see if similar had happened and compared settings within these Hype projects.
I found that not ticking “initial scale 1.0” in the mobile options has now made Firefox reduce in size to match Google Chrome. Firefox does still have the bolding fonts as you mention, so I will now add the code you have listed.
I’m not sure if unticking “initial scale 1.0” has had an effect on a mobile device as I haven’t tested yet so it might not be a fully successful solution.
But currently it is just Safari which is the weak link here. It remains quite a bit larger from the project which has been designed. Quite odd but I hope this can be resolved as its important to have it displaying consistent across all browsers.
I have just reset this across all browsers (Chrome, Firefox, Safari) and its done the trick!
A little weird as all other sites I visited have displayed the same size thats why I questioned whether I had an issue, as it was only when I was previewing a Hype project I noticed the sizes varying.
Just following on from your answer to bolding fonts in Firefox and the opposite in Safari.
I have two custom fonts for the complete project and they render the same for Chrome and Safari but Firefox is much brighter which could be the same as bolding?
Where should I add the following in the Hype project to try and correct this?