视口元标记是否适用于 HTML 4.01？答案

【问题标题】：Does viewport meta tag work in HTML 4.01?视口元标记是否适用于 HTML 4.01？
【发布时间】：2020-07-15 07:12:37
【问题描述】：

我正在开展一个项目，他们在其中创建了 HTML4.01 网页，现在他们希望这些网页应该支持两个新的跟踪手持设备。

我添加了viewport 元标记并为特定设备编写了媒体查询。但是，代码没有对它们进行任何更改。那么应用媒体查询并适应设备的替代方法是什么？

<!-- 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">&nbsp;&nbsp;
         <%=(String)session.getAttribute("USER_ID") %> : <%=(String)session.getAttribute("PORTID") %>&nbsp;</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>

页面应该响应以 HTML 4.01 编写的手持设备。

【问题讨论】：

你确定“两个新的追踪手持设备”上的软件支持<meta viewport>？
摩托罗拉 MC67 操作系统：- Microsoft Embedded Handheld 6.5 Professional MOtorola TC77 操作系统：- Android 8.01 .. 我猜这些设备支持元视图端口。请帮助我如何检查这个@Quentin
将它指向一个简单的测试文档，其中包含有效的 HTML 和一些非常明显的 CSS，例如根据大小改变背景颜色。
已经尝试使用媒体查询应用背景颜色.. dint 不起作用。@Quentin
那么我猜浏览器不支持它，Doctype 是无关紧要的。（这就是为什么创建minimal reproducible example 很重要，它可以让您缩小问题范围）。

标签： html css media-queries viewport html4

【解决方案1】：

将您的媒体查询@media screen and (max-width: 767px) 替换为这个@media only screen and (max-width: 767)

【讨论】：

max-width: 767 是无效的 CSS。是什么让您认为引入错误会解决问题？