my project is asp.net. I have to convert this as tab devices. but device height is not fit for the screen. I already added below line asp page.
<meta name="viewport" content="height=device-height,width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
how can I change the correct Height?. See below pictures. browser with is perfectly correct. only the problem is height only.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MobileApp.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<meta name="viewport" content="height=device-height,width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<link href="Styles/jquery.mobile-1.0b3.css" rel="stylesheet" type="text/css" />
<%-- <script src="Scripts/javascript.js" id="mobile" type="text/javascript" /> --%>
<script type="text/javascript">
function username() {
if (form1.txtUserName.value == "") {
form1.txtUserName.focus();
alert("UserName cannot be blank");
return false;
}
else if(String.length(form1.txtUserName.value) <= 6){
alert("UserName should be Lessthen Seven Char");
}
}
if (navigator.userAgent.match(/Android/i)) {
window.scrollTo(0, 1);
}
</script>
<%--<style>
@media screen and (orientation: landscape) {
html, body {
width: 100%;
}
.content h1.landscape { display: block }
.content h1.portrait { display: none }
}
@media screen and (orientation: portrait) {
html, body {
width: 100%;
}
.content .landscape { display: none }
.content .portrait { display: block }
}
</style>--%>
</head>
<body>
<form id="form1" runat="server" style="background-color:LightSkyBlue; height:100%; min-height:300px">
<div style="height:100%;">
<div style="height:20%;"><br />
<img src="Images/MCSlogo.png" style="margin-left: 25%" height="40px" width="50%" alt="logo" /><br />
<%--<asp:Image ID="Image1" runat="server" style="margin-left: 25%" ImageUrl="~/Images/MCSlogo.png" height="40px" width="50%"/> --%><br />
<asp:Label ID="Label1" runat="server" style="margin-left: 25%"
Text="MCS Mobile POS" Font-Bold="True" Font-Names="Times New Roman"
Font-Size="Medium" ForeColor="#DA251D"></asp:Label>
</div>
<div id="content" runat="server" class="content" style="height:70%; min-height:180px"> <br />
<%--<asp:Label ID="Label2" runat="server" Text="UserName:" style="text-align:right"
Font-Names="Times New Roman" Font-Size="Small"></asp:Label> --%>
<asp:Button ID="Button1" runat="server" Text="UserName :" width="30%"
BackColor="LightSkyBlue" BorderColor="LightSkyBlue" BorderStyle="None"
Font-Names="Times New Roman"/>
<asp:TextBox ID="txtUserName" runat="server" width="60%" Font-Names="Times New Roman"></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtUserName" style="margin-left: 25%"
ErrorMessage="Please Enter UserName" ForeColor="#FF3300"
Font-Size="Smaller"></asp:RequiredFieldValidator>
<br />
<%-- <asp:Label ID="Label3" runat="server" Text="Password :" style="text-align:right"
Font-Names="Times New Roman" Font-Size="Small"></asp:Label>--%>
<asp:Button ID="Button2" runat="server" Text="Password :" width="30%"
BackColor="LightSkyBlue" BorderColor="LightSkyBlue" BorderStyle="None"
Font-Names="Times New Roman"/>
<asp:TextBox ID="txtPassword" runat="server" onkeyup="username()"
TextMode="Password" CssClass="txt" width="60%"
Font-Names="Times New Roman"></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPassword" style="margin-left: 25%"
ErrorMessage="Please Enter Password" ForeColor="#FF3300"
Font-Size="Smaller"></asp:RequiredFieldValidator> <br />
<br />
<asp:Button ID="btnSubmit" runat="server" Text="LogIn"
style="margin-left: 10%; " width="80%"
onclick="btnSubmit_Click" Font-Names="Times New Roman" Font-Bold="True"
Font-Size="Medium" SkinID="2" CssClass="button violet" /><br />
</div>
<div id="footer" class="footer" style="height:10%;">
<asp:Label ID="Label4" runat="server" Text="&copy M CUBIC SOLUTIONS" style="margin-left:25%"
Font-Names="Times New Roman" Font-Size="XX-Small"></asp:Label>
<br />
</div>
</div>
</form>
<%--<script>
(function () {
var fixgeometry = function () {
/* Some orientation changes leave the scroll position at something
* that isn't 0,0. This is annoying for user experience. */
scroll(0, 0);
/* Calculate the geometry that our content area should take */
var header = $(".header:visible");
var footer = $(".footer:visible");
var content = $(".content:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
/* Trim margin/border/padding height */
content_height -= (content.outerHeight() - content.height());
content.height(content_height);
}; /* fixgeometry */
$(document).ready(function () {
$(window).bind("orientationchange resize pageshow", fixgeometry);
});
})();
</script> --%>
</body>
</html>
Solutions Is :-
As My Coding is Working in Android Phone and Tabs,. See the Below Steps,.
1) Check the Browser in Phone or Tabs
2) If the Browser is not Opera Mini. Install the Opera Mini to Your Phone or Tab.
3) Now the asp.net pages are fit to the Screen.
Thanks.