Set Default Zoom Level for Browser

9

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.

Another alternative is Expand to fill

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>
1 Like