Monitor screen resolution changes when laptop lid is closed

Question

Question: Application should render in center of the screen when user view my ionic mobile application on the desktop browser.

attempt 1 : I tried using wrapper div on it with width fixed in my case max-width:732px; and margin: 0 auto; but ionic don't allow us to append div over app screen goes blank.

attempt 2 : Used width for inner element like (header, footer, ionic-view ) and tried align that in center but header .bar class breaks header as it is positioned element with this fix also didn't work expected;

attempt 3 : Used position and try to align with width:calc(50% - 732px); still header breaks;

my understanding : ionic-view .scroll-content is positioned element, it create new element for scroll so won't be fix with margin, text-align, wrapper or inner element

expectation : Is there any way to fix this issue? i want my application to look like this resolution independent in center of the screen: https://jsfiddle.net/HarishBoke/26a6dbbu/1/

Any help is much appreciated advance. Thanks in Advance.

Solution

If you choose to Duplicate these displays, your computer has to choose a resolution that is supported by both displays.

If you cannot choose a higher resolution with the lid open, it means that 1024 x 768 is the highest resolution supported by your internal display. Obviously, this restriction does not apply when using only the external monitor.

Comments

[Dinesh Sundaraneedi]

How you are runing your application. Are you using "ionic serve" ?

[Harish Boke]

i am using "ionic serve --liverhood" but my question is different, i want user to see application in center view when user is using desktop