Viewport – 正确显示页面所必需的标签 HTML

Viewport – 这是用户实际看到的屏幕。这个参数的简单描述是通过对角线的大小来衡量的。在实际应用中，监控页面可见区域的描述是一组参数，包括对角线、长宽比、单位面积的像素数等。

Viewport HTML – 自适应屏幕的新任务是如何出现的

显然，小型智能手机的对角线最小，而大型显示器的对角线最大。然而，当前时代之前是一个技术不发达的时代，因此小玩意的种类较少。屏幕参数没有显着差异，无需在页眉中输入新参数。现有技术允许使用柔性和固定标记。事实上，如果仍然在大致相同的条件下查看这些网站，会有什么不同呢？

但移动设备的出现给这个问题带来了新鲜感。该小工具已经具有广泛的参数，包括像素分辨率。因此，屏幕可见区域变得更加可变，这给开发人员使网站页面适应设备带来了挑战。 Viewport HTML 是后来创建的。最初，通过更改站点设计文件解决了该问题。

CSS3 – 如今，几乎所有设备都支持此规范。但它也有缺点。由于屏幕分辨率多种多样，必须为每个参数单独创建响应能力。两部智能手机可能具有相同的对角线，但每单位面积的点数可能相差两倍。这正是该公司产品之间可以观察到的差异 Apple.

iPhone 3 ________ 320 - 480

iPhone 4 ________640 - 960

同一制造商生产的智能手机型号的屏幕点数相差两倍。字体大小和块轮廓确定不准确导致水平滚动不方便。这给互联网用户带来了极大的不适。

Meta Viewport – 这是一个考虑到CSS3设计文件的缺点的工具。垂直滚动对于任何页面来说都是自然的。水平滚动会带来不便。如果您必须不断地将文本移至两侧，则文本将很难阅读。出现这种缺陷正是因为页面宽度确定不准确。并且用户可以将屏幕设置为水平方向。

meta name=”viewport” content=”width=680”

参数添加在页眉中 HTML. 该示例指定了两个参数：标签名称和宽度。 Viewport Meta Tag - 该行允许您设置屏幕的精确宽度。因此，文本块完全覆盖了屏幕的宽度。

下面是一个可以挽救这种情况的行的简单示例。标签选项还有更多选项，但这就是简单拼写的样子。

Option 1

meta name=”viewport” content=”width=device-width, initial-scale=1.0”

Option 2

meta name=”viewport” content=”width=device-width, initial-scale=1” /

Viewport width 下面是一个可以挽救这种情况的行的简单示例。标签选项还有更多选项，但这就是简单拼写的样子。

width=680

width=device-width, initial-scale=1.0

第一个示例设置固定的监视器屏幕宽度。这可以是 200 到 1000 点之间的正整数。第二个示例使页面内容适应不同的屏幕。

height= 680

height= device-height, initial-scale=1.0

Viewport height 第一行指定屏幕高度，是 233 到 1000 像素之间的整数。

参数列表指示了主要的缩放方法。重要提示 - 在实践中，建议仅使用第一个参数，因为其余参数将使用户难以查看页面并降低内容的可访问性。

Head – 这是每个 HTML 页面中应包含 Viewport 参数的部分。请注意，某些浏览器不支持页面适配标签。

对于这种情况，使用旧标签。 WordPress 等流行的网站构建器不会自动分配自定义选项。要解决该问题，您需要使用特殊的插件。但这并不意味着Viewport元标记不能写在代码中。在这种情况下，搜索引擎会将其视为错误。因此，必须在 HTML 页面上写出比例的指示。

搜索引擎认为缺少视口标签是错误的。尽管网站构建器不会自动编写此行，并且某些浏览器尚未考虑到它，但必须注意确保页面显示此行。另外，你不应该正式地对待这个问题。缺少宽度和缩放参数，或者编写的代码不正确也会导致错误和网站在搜索结果中排名不佳。