我的项目是asp.net。我必须将其转换为标签设备。但设备高度不适合屏幕。我已经在asp页面下面添加了。
<meta name="viewport" content="height=device-height,width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
如何更改正确的高度？见下图。浏览器是完全正确的。唯一的问题是高度。
<%@ 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>