I am working on a project where they have created web pages in HTML4.01 and now they want the pages should be supported with two new tracking handheld devices.
I have added viewport meta tag and wrote media queries for the specific devices. However, the codes are not making any changes to them. So what would be the alternative way to apply the media queries and fit to device?
<!-- Added the meta tage in head -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles"%>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/c-rt.tld" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<c:if test="${sessionScope.IEVERSION == '6.5'}">
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
</c:if>
<c:if test="${sessionScope.IEVERSION =='6.0'}">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
</c:if>
<html>
<HEAD>
<c:if test="${sessionScope.IEVERSION == '6.5'}">
<meta name="mobileoptimized" content="225">
</c:if>
<TITLE><bean:message key="lbl.eporthh.common.title"/>-<bean:message key="lbl.eporthh.common.home"/> </TITLE>
<link rel="stylesheet" href="<%=request.getContextPath() %>/corporate/vehicles/css/<c:out value="${homeActionForm.theme}"/>" type="text/css">
<LINK REL="SHORTCUT ICON"
HREF="<%=request.getContextPath() %>/corporate/vehicles/images/.ico">
</HEAD>
<BODY topmargin="20%" leftmargin="0" bottommargin="5%" rightmargin="0"
marginheight="0" marginwidth="0" style="width:device-width;overflow-x:hidden;overflow-y:hidden;">
<html:form action="/hh" method="post" >
<TABLE width="100%" cellpadding="0" cellspacing="0" border="1" bordercolor="#E1E1F0" >
<TR class="datextHeading1">
<TD align="left" ><bean:message key="lbl.eporthh.common.home"/></TD>
<TD align="right" align="left" colspan="2" class="datext4">
<%=(String)session.getAttribute("USER_ID") %> : <%=(String)session.getAttribute("PORTID") %> </TD></TR>
<TR>
<TD colspan="3">
<table cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td>
<TABLE cellpadding="0" cellspacing="0" width="100%" >
<c:if test="${homeActionForm.listOfOperation != null }">
<input type = "hidden" value="" name="selectedMainOperation">
<c:forEach var="homeList" items="${homeActionForm.listOfOperation}">
<A href="javascript:fn_selectRadio('<c:out value="${homeList.optionkey}"/>')" >
<TR valign="top" class="datext2" >
<TD valign="top" colspan="3" align="left">
<INPUT type="radio"
name="arrival" id="${homeList.optionkey}"
value="${homeList.optionkey}" onclick="fn_onsel(this.value)" >
<%-- <bean:message key="${homeList.optionValue}"/> --%>
<a href="javascript:fn_selectRadio('<c:out value="${homeList.optionkey}"/>')" class="datext3"><bean:message key="${homeList.optionValue}"/></a>
</TD>
</TR>
</A>
</c:forEach>
</c:if>
<c:if test="${homeActionForm.listOfOperation == null }">
<TR valign="top" class="datext2" >
<TD><bean:message key="lbl.arrival.handheldhome.noaccess"/><br><font color="red"><bean:message key="lbl.arrival.handheldhome.contactsysadmin"/></font></TD>
</TR>
</c:if>
</TABLE>
</td>
</tr>
</table>
</TD>
</TR>
</TABLE>
<input type="hidden" name="commandId" value=""/>
</html:form>
<!-- added in the bottom of body -->
<style>
@media screen and (max-width: 767px) {
body {
width: 93% !important;
zoom: 175%;
}
}
<style>
</BODY>
</html>
Pages should be responsive for the handheld devices which written in HTML 4.01.
Replace your media query @media screen and (max-width: 767px) with this @media only screen and (max-width: 767)