Resize problem diffrence mobile / desktop

#1

Hi All. I have a html5 site based ONLY openfl, as flash sites early.
Project.xml have w/h = 0, main have NO_SCALE
MainMenu on site have 640 width, 30 height and setted by center.
Test in desktop browser - all good, every size is real. (1920/1080 resolution, and centered menu)
Test in mobile browser (1920/1080) - trace(w/h) - i see 960 / 540 so all of my elements looks bad! Why 1/2 of resolution setted???

#2

Hi,
i don’t know about the problem you are having. But i suggest you should consider using this lib it helps allot with positioning , resizing etc. advanced-layout.

#3

No. Problem really simple than u answer. Really device resolution 1920/1080 (mobile) - but trace show 1/2 of this resolution. So all of objects position and scaling wrong. Why stage.stageWidth/height 1/2 of real? In flash target - no problem, only html5 , maybe settings ???

#4

I didn’t have this problem.

But i test responsive things using Developer console
image and it will allow you to test on different sizes .

image

may be you are missing : Resize Event which fires every time when screen size is changed

stage.addEventListener (Event.RESIZE, stage_onResize);

private function stage_onResize (event:Event):Void {
		
		resize (stage.stageWidth, stage.stageHeight);
		
	}

you can check Pirate Pig example there is a resize method and can help you debug your code too .

#5

Ok. U think, that after app is loaded, resize fires? I dont change screen size, its mobile - that have static size(orientation is portrait and fixed), no event resize is needed. After loaded stage.stageWidth must be 1920, not 960. Now we dont say about flexible design on diffrent sizes, now we say about desktop 1920/1080 and mobile 1920/1080 - so elements after loaded must be on similar coordinates and have similar size.

#6

these traces ( after Event.RESIZE is fired ) helped us debug a few issues :

		trace("Lib.current.stage.stageWidth: " + Lib.current.stage.stageWidth);
		trace("Lib.current.stage.stageHeight: " + Lib.current.stage.stageHeight);
		
		trace("Lib.current.stage.width: " + Lib.current.stage.width);
		trace("Lib.current.stage.height: " + Lib.current.stage.height);
		
		trace("Lib.current.width: " + Lib.current.width);
		trace("Lib.current.height: " + Lib.current.height);
		
		trace("Capabilities.screenDPI: " + openfl.system.Capabilities.screenDPI);
		trace("pixelAspectRatio:" + openfl.system.Capabilities.pixelAspectRatio);

		trace("os: " + openfl.system.Capabilities.os);
		trace("pixelAspectRatio: " + openfl.system.Capabilities.pixelAspectRatio);
		trace("playerType: " + openfl.system.Capabilities.playerType);
		trace("screenColor: " + openfl.system.Capabilities.screenColor);
		trace("screenDPI: " + openfl.system.Capabilities.screenDPI);
		trace("screenResolutionX: " + openfl.system.Capabilities.screenResolutionX);
		trace("screenResolutionY: " + openfl.system.Capabilities.screenResolutionY);
#7

you can also find out some values - using these URLs otherwise i would choose mastef path to debug .

http://dev.jeffersonscher.com/resolution.html
http://www.screenresolution.org/

#8

Perhaps try <window allow-high-dpi="true" />. For performance, we default to "false" on HTML5 builds :slight_smile:

#9

singmajesty - it does work now. Thanks!!!

1 Like