Webix ui is not uniform across all mobile simulatos

Webix JS
1

Hi, I am using Mobilizer simulator to view webix pages but the webix pages are not uniform in all simulators. I do have an urgent requirement. Can someone help me on this asap?
Below is the code -

<!DOCTYPE html>
<html>
	<head>
      <link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
       <script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
		<title>Login Page</title>
				<style>
				.webix_layout_toolbar1 {
				color: #1E2022!important;
				background-color: #2281BB;
				background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#EAF3FF),color-stop(50%,#2281BB),color-stop(100%,#2281BB));
				background-image: -webkit-linear-gradient(top,#2281BB 0,#2281BB 50%,#2281BB 100%);
				background-image: -moz-linear-gradient(top,#2281BB 0,#2281BB 60%,#2281BB 100%);
				background-image: -ms-linear-gradient(top,#2281BB 0,#2281BB 60%,#2281BB 100%);
				background-image: -o-linear-gradient(top,#2281BB 0,#2281BB 60%,#2281BB 100%);
				background-position: 0 1px;
				background-repeat: repeat-x;
				}
				.bt_1 input{
			
				font-weight:bold;
				}
				.bt_1 input:active{
					background: #396D9E;
				}
		
			.t02 input{
				border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px;
				background: #F2F4F5;
				background: -moz-linear-gradient(top, #F2F4F5 0% , #F2F4F5 100%);
				border:1px solid #F2F4F5;
				box-shadow: inset 0px 1px 1px #F2F4F5;
				-webkit-box-shadow: inset 0px 1px 1px #F2F4F5;
				color:#000000;
				text-shadow:0 -1px 0 #000000;
				font-family:Tahoma;
				
				}

				
				.t01{
				border-radius:12px; -moz-border-radius:12px; -webkit-border-radius:12px;
				background: #F2F4F5;
				background: -moz-linear-gradient(top, #F2F4F5 0% , #F2F4F5 100%);
				border:1px solid #F2F4F5;
				box-shadow: inset 0px 1px 1px #F2F4F5;
				-webkit-box-shadow: inset 0px 1px 1px #F2F4F5;
				color:#000000;
				text-shadow:0 -1px 0 #000000;
				font-family:Tahoma;
				
				}

		</style>
	</head>
	<body style="background: #F2F4F5">
		
		<div id='layout_div' style=" position:absolute;width:300px;height:200px;z-index:15;top:45%;left:47%;margin:-100px 0 0 -150px;"></div>
		<div id='areaB' align="center"></div>
		<script type="text/javascript" charset="utf-8">
		
			webix.ui({
				container:"layout_div",
				type:"clean",
				id:"layout",
				align:"center",
				rows:[
					{},
					{container:"header",
				view:"toolbar",
				css:"webix_layout_toolbar1",
				cols:[
					
					{ view:"label",label:"<font color=white align=center><b>XXXXXXXXXX</b></font>",align:"center"}
				]},
					{
							id:"a1",
							container:"areaA",
				view:"form", scroll:false,
			elements:[
					{ view:"text", placeholder:"Email",width:301,align:"center"},
					{ view:"text", type:'password',placeholder:"Password",width:301,align:"center"},
					{view:"button",css:"bt_1",value:"Login" ,type:"form",width:301,align:"center",click:"navigation"},
					{ view:"label", label:"<a href='forgot Password.html'><b>Forgot Password?</b></a>",align:"right"},
					{ view:"label", label:"xxxxxxx<a href='vvvvv.html'><b>Sign Up</b></a>",align:"center"},
				]						
					}
				]
			}).show();
			
		</script>
	</body>
</html>
2

Can you share what “not uniform” behavior was in your case ?
The only thing which I can see - size of the window is bigger than screen size on some devices. It can be fixed by removing hardcoded width from the UI configuration.

Also, the “Mobilizer” tool doesn’t mimic behavior of real mobile browsers. It sets necessary sizes, but still behave differently. The Google Chrome emulation panel is more reliable.

3

Yes, Not uniform means size of window. Actually when I remove these width, text box size is more than screen size and its coming according to the screen of mobile.

4

You can use layout component if you need adjust the UI to the size of screen.
http://webix.com/snippet/95f78352