Viewport标签优化网站在手机上的显示效果。

使用Viewport标签可以设置网页在移动设备上的显示宽度、缩放比例、初始缩放级别等参数，从而使网站在手机上获得更好的展示效果。

在HTML文档的头部添加如下代码即可使用Viewport标签：

“`html
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
“`

其中，”width=device-width”表示将网页宽度设置为设备的宽度，”initial-scale=1.0″表示初始缩放级别为1.0。

Viewport标签的优化效果包括：

1. 自适应屏幕宽度：设置为设备宽度后，网页能够根据屏幕的实际宽度进行自动适应，避免了在手机上出现横向滚动条。

2. 显示比例控制：通过initial-scale参数，可以控制网页在手机上的初始缩放级别，使得页面显示更合适，不会出现文字过小或者过大的情况。

3. 优化触摸操作：Viewport标签可以使得网页上的一些元素和按钮在手机屏幕上更容易点击，提升了用户体验。

综上所述，通过Viewport标签的优化，可以使网站在手机上获得更好的显示效果，提升用户体验和网站的可访问性。