The Screen Orientation API


(PixelArt) #1

Greetings to all Jedi’s, especially Yoda, I want to implement this function in a Web App that I am developing. The client is asking that the screen remain in portrait mode always so it doesn’t rotate onto horizontal. Please keep in mind that I am a graphic designer not a programmer and I have this code but doesn’t work. Daniel you recommend me that it shouldn’t be done but the clients ask for it more every day that passes. I’d like to know how we could implement and use this so it works.

https://w3c.github.io/screen-orientation/

Gracias Amigos


(Mark Hunte) #2

Did Danial expalin already that this is experimental and not fully supported by all browsers…


(Loves Hype) #3

May I ask why you got portrait and landscape to start with if you only need portrait?

If you got multiple layouts and want manually to lock one on the fly you can do this by listening to “HypeLayoutRequest”. This extension could be a good way to go…

1.) include the JS in your Head-HTML or link it via script-Tag
2.) use the following code on an function running on your first scene

hypeDocument.onLayoutRequest = function(layoutName, sceneName){
	return "ENTER YOUR LAYOUTNAME HERE";
}

If this is still to much code for you make your scenario more clear.

I si quieres podemos hablar espaniol.


(PixelArt) #4

Gracias por compartir ideas y posibles soluciones, pero no es lo que se desea para el proyecto.

Se busca que el web-App se mantenga en formato portrait y no cambie su vista a landscape.

Por que el web app se diseñara para iPhone & Android, estoy estudiando otras vias pero solo por capricho quiero hacerlo en HypePro, yo creo mucho en esta aplicación y quiero ver sus limites y bondades. Hasta ahora ha sido una pontente herramienta de mi trabajo.

Pero comentame mas del ejemplo que me enviastes por que no bloquea el diseño.

Recuerda la vision de un diseñador es muy diferente a los desarrolladores nosotros cuidamos mucho la estetica y ergonomia como la interaccion. El desarrolador visualiza la solucion mas rapida sin importarle la estetica y el uso


#5

Perhaps you can group everything and rotate 90º for the landscape version so it looks as though nothing has changed. Unfortunately, as a web app you won’t be able to lock rotation on non compliant browsers. (namely Safari and ultimately iOS)

78BACD16-E436-4469-A2C4-8D6AAC454AE8