How to fit screen as per device/screen resolution?
Question
I have done application using Extjs4.1 working very nicely. client they need screen like once they visit application url in different device except phone. All screens should be fit as per device without any horizontal/vertical scroll bar. I have included a line of code in the index.html file within head, meta tag as below. so now application is fitting in ipad without any scroll bar. In my desktop monitor also screen is fitting nicely, but same application url if i browse in laptop horizontal/vertical scroll bar coming. How to fit all screens in laptop device like ipad/desktop monitor?. I am not using flex, because if it small device it will fit, but problem all component will be merge one above the other(overlap) while minimizing/maximizing also has the problem. Can any body tell me how to resolve this issue? Great appropriated. Thank you
Code is Here:
<head>
<meta name="viewport" content="width=1024">
</head>
1 answers
solution1
0 ACCPTED 2013-06-28 04:28:19
In extjs not able to differentiate laptop and desktop device. I have gone different way. but this not correct way. we can achive as per requirement. In view globally calculating height of the screen. if screen resolution is 1600X900 (Desktop) window.ineerHeight will be come more than 700. if screen resolution is less than 1600x900 window.innerHeight will be less than 700. So here calculating dynamic value assigning to component. it is working very nicely for me. Cheers
Here is my code:
if(window.innerHeight>700){
var paddingValue = 10;
var imgHeight = window.innerHeight/4.1; //Desktop
}
else{
var paddingValue = window.innerHeight/35;
var imgHeight = window.innerHeight/5.7; //Laptop
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.