When I go to my site in my browser, the default zoom level is far too big and I have to zoom out twice with the browser controls (pressing the command and + buttons simultaneously).
The problem with the default zoom level is that half of my content on the page gets cut off and doesn’t fit neatly within the page.
Please advise if there may be a fix and thank you so much for considering this and potentially providing a solution 
With gratitude,
Not sure what your asking here. You are controlling your stage size by setting it up based on pixel values or on a percentage value. You might also read about Layouts to optimize for mobile views.
Pixels.
Sorry I may not be clear.
So the Hype 4 app shows the layout of all my objects nicely, everything fits on the stage. However, this is not what i see when the html loads in my browser: everything is zoomed in (text, rectangles etc) and objects (buttons, text etc near the edge of my stage are all missing or cutoff. Basically, what i see as 100% in Hype is 150% in my browser.
Maybe i need to decrease the pixel count of my stage area and see if that helps?
Any feedback appreciated.
Browsers offer a zoom level. This sounds like you have changed that in your browser at some point. Have a look at this article if your using Safari:
I recommend hitting "Command-0" to reset your browser zoom to 100%.
Mobile browsers have an "initial-scale" viewport meta tag that can help control the zoom level, but I've seen some curious behavior with it when coupled with other settings. You can set the initial scale to 1.0 via the checkbox in the Mobile Options of Hype's Document Inspector. To my knowledge, it has no effect on desktop browsing zoom levels, which are all user-controlled.
Jonathan, thanks for your salient feedback! In the Mobile Options of Hype's Document Inspector the checkbox to set the initial scale to 1.0 is greyed-out. How do I enable this checkbox, so can set the scale ?
Any guidance is of course greatly appreciated
So I realized that my Stage Layout Size is far too large for most screens (1920 x 1080 pixels) and the optimal viewing experience across most displays is about 85% zoom level when toggling the browser zoom settings (by hitting cmd and the minus symbol). Is there a way to force the zoom level to specific percentage (85%) on all browsers (Chrome, Firefox, Safari etc) when a user visits my site?
This would be an ideal fix. I have about 20 pages designed and don't want to resize and reposition all objects onto a smaller stage...
Please advise!
There is an easy fix…
Group your entire content …
Make the group as big as your scene
Set the document to 100% by 100%
And adjust the following settings under Metrics on that group
This basically bounds the layout is fitted into the bounding box of the scale group "Shrink to Fit". If you want to have the layout scale to full width the height becomes a dependent and dynamic property on the current width.
This is the other option "Expand to fill". As the pins center the content you want to unpin the bottom. If you preview it now it should do what you want. Only problem left is that Hype sets the Height of the document to 100% and the content might now be clipped. In that case a little JavaScript helps on document load. Just copy and paste the following into your head HTML and give the group the class dimensions (this could also be rewritten to assume the first group in a scene to determine size).
<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeMutationObserver/HypeMutationObserver.min.js"></script>
<script>
function sceneLoad(hypeDocument, element, event) {
var groupElm = element.querySelector('.dimensions');
if (groupElm){
var hypeDocElm = document.getElementById(hypeDocument.documentId());
hypeDocument.startMutationObserver(groupElm, function(ml){
var sceneWidth = parseFloat(window.getComputedStyle(element, null).getPropertyValue("width"));
var ratio = hypeDocument.getElementProperty(groupElm, 'height') / hypeDocument.getElementProperty(groupElm, 'width');
hypeDocElm.style.setProperty('height', Math.ceil(sceneWidth*ratio)+'px', 'important');
hypeDocument.relayoutIfNecessary();
}, {attributes: true, attributeFilter: [ "style" ]});
}
return true;
}
if("HYPE_eventListeners" in window === false) window.HYPE_eventListeners = Array();
window.HYPE_eventListeners.push({"type":"HypeSceneLoad", "callback":sceneLoad});
</script>
If it is greyed out it should also be checked?
It gets disabled and checked if you have multiple layouts in your document, because presumably you are designing with that specific size in mind. (Or perhaps there was some other technical reason also - it was a long time ago we added that feature!)