I am creating a site in HYPE for mobile devices so that it has better adaptation (like https://taplink.ru) I create the first layout 320 * 2000. I place elements there. Everything is displayed well on all mobile devices. But as soon as I add a desktop layout, the position of the elements on mobile is immediately violated devices. I want to make a flexible adaptation in the second layout specifically for the desktop. So that there is a good adaptation for both mobile devices and for desktops of different windows I viewports. How to solve this problem and is it possible to solve it at all?
I know and saw all this. But I would like the program to have universal flexible adaptation depending on the viewport, as it is done in the online service: https://taplink.ru. with the possibility of manual editing if necessary for a specific viewport.
I now have everything perfectly adapted to all mobile devices in my existing flexible layout. But a problem immediately arises if I add an additional layout for the desktop. Immediately there is a change in the previous flexible layout for mobile devices and already there everything is displayed incorrectly on some of them.
I would like to see specific points at which there was a flexible display on the necessary devices. For example, if I choose an iPhone 320*, then everything should be displayed correctly on all mobile devices (as I have now in this example). If I choose desktop, then the previous setting on the mobile layout should not go astray. Now this is happening - mobile devices immediately cease to have flexible adaptation. You have to do everything manually for each viewport, depending on the name of the mobile device. This is very inconvenient and requires additional time.
In this example, the layout is perfectly flexible, but there is no scroll. There is no way to view all the content. How can I fix this? 2new.zip (1.1 MB)
Well, then you should reevaluate the usage of Tumult Hype if that is what you want. As outlined in the article, Hype works with a "hard" switch, as it is meant for animations. Given that animations are interactions relating to each other, Hype is using absolute positioning. What you want are classic responsive break points that work with media queries and just reflow the layout without "hard" switching the underlying DOM tree. In Hype, the latter is what is happening. When you use layouts, you are essentially introducing new "scenes" that are selected by the width of the Hype stage (not the viewport). So, once that sinks in, you can start thinking about a workaround. Meaning, you can register a callback to the event HypeLayoutRequest and use that to display or hide something in your single layout approach:
var breakPointDesktop = 600;
function HypeLayoutRequest(hypeDocument, element, event) {
var sceneElm = element;
var sceneWidth = sceneElm.clientWidth;
sceneElm.querySelectorAll('.hideOnDesktop').forEach(function(elm){
elm.style.display = sceneWidth > breakPointDesktop? 'none' : 'block';
});
sceneElm.querySelectorAll('.showOnDesktop').forEach(function(elm){
elm.style.display = sceneWidth <= breakPointDesktop? 'none' : 'block';
});
}
if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
window.HYPE_eventListeners.push({"type":"HypeLayoutRequest", "callback":HypeLayoutRequest});
