Question

如何强制Firefox（或任何其他浏览器）缩放文本和图像以适应显示器的分辨率？

<meta name="viewport" content="initial-scale=1; target-density=device-dpi; user-scalable=no; shrink-to-fit=yes">

遗憾的是，

什么也没做。

<!DOCTYPE html>
<html style="height: 100%; width: 95%">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1; target-density=device-dpi; user-scalable=no; shrink-to-fit=yes">
<link href="bootstrap.css" rel="stylesheet">
</head>
<body style="height: 100%; width: 95%; padding: 0.313em; word-wrap: break-word">

<div class="container">
<div class="row">
<div class="col-xs-7 col-md-5" style="height: 40em; min-width: 25em; border-top: solid; border-bottom: solid; border-color: black; margin:1.250em">
<h3 align="center"> Statistics </h3>

<table class="table" style="width:100%">
<thead style="text-align: left">

<tr>
<td style="border:none"><td>
</tr>
<!-- Repeat a dozen times -->

</thead>
</table>
<div>

<div class="col-xs-7 col-md-5" style="height: 40em; border-top: solid; border-bottom: solid; border-color: black; margin:1.250em">
<img src="diagramm.png"></img>
</div>
</div>
</div>
</body>
</html>

Answer 1

我要在黑暗中拍摄并说你的视口元素不是你应该使用的。这样做

<meta name=viewport content='width=device-width, initial-scale=1'>

定位设备dpi并缩小以适应但没有任何问题，但您必须非常了解您要完成的任务以及将要发生的事情。我展示的元是通用的，无处不在。

Answer 2

_{Rob的回答是正确的;我想进一步了解一下细节，因为这需要花费更长的时间来查找，我想节省未来读者的时间。}

您的<meta>元素存在两个主要问题：

content的有效name="viewport"属性值列表为：
- width
- height
- initial-scale
- minimum-scale
- maximum-scale
- user-scalable
您的内容具有非标准值，以粗体显示：

initial-scale=1;的 target-density=device-dpi; user-scalable=no;的 shrink-to-fit=yes

target-density=device-dpi 在使用时的实施非常有限;我相信只有WebKit支持它。 WebKit还在2012年deprecated it和removed support。您不应再在代码中使用target-density=device-dpi;请改用标准width=device-width。
Apple已针对iOS9中的移动设备向Safari WebKit添加
shrink-to-fit=yes 。它是一种非标准属性，除了运行iOS9 +和Safari Mobile的设备外，从未在其他设备上运行。它可能会被符合标准的浏览器所忽略，因此如果您真的希望在运行Safari Mobile的iOS设备上删除它，请不要删除它。

您在content属性中使用了分号分隔符。这是非标准的;只有一些UA支持这一点（我相信Safari是目前唯一的一个）。您应该使用逗号分隔您的属性值。令人沮丧的是，HTML W3规范中没有提到这一点，而是在CSS规范中提到CSS Device Adapt：

作者应使用逗号以确保内容在所有UA中按预期工作

我不确定为什么规范作者认为在CSS文档中定义HTML数据和要求是合适的，但是你有它：

强制Firefox扩展符合设备大小的内容

2 个答案: