Responsive Layouts


(Wasura Edirisuriya) #1

Hi, If i wanted to create a story app for android and iOS how am i gonna use the layouts. First i tried using the iPhone Layout and generate an app using phonegap and i checked using my phone Note 3 Neo and its not in a correct positions needs to scroll. So can you advise me how to do it. What Layouts should i use? Not only android phone but also Android tablets like tab 7 and tab 10 . Do i need create separate layouts for each of theme? If so what will me the scence sizes. Thank you so much for your time to read this. :wink: :slight_smile:


#2

If the positions remain constant, you can use JS to resize the screen based on the width of the device.
Group everything, content-overflow: hidden, scale 100% width and height, all pins and layouts selected with shrink to zoom. Then run this JS on scene load:

hypeDocument.currentSceneElement = function(){
return document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');
}

const yourHeight = 400, yourWidth = 600;
positioning();
window.addEventListener('resize', positioning)
function positioning(){
var width =  window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
var height = Math.floor((width*yourHeight)/yourWidth);


var scene = hypeDocument.currentSceneElement();

scene.style.height  = height + 'px';
document.getElementById(hypeDocument.documentId()).style.height = height + 'px';

hypeDocument.relayoutIfNecessary();
}

Just fill in the width and the height and you’re good to go. If you do need to have different content layouts that still resize, try and copy everything in this document:
DOUBLE LAYOUT.hype.zip (15.1 KB)

Good luck :slight_smile:
P.s. - this is all courtesy of @h_classen


(Wasura Edirisuriya) #3

wooow Thank you sooooooooooooooo much @PappaSmalls and @h_classen