随着移动设备的普及，越来越多的用户使用手机和平板电脑访问网站。这就需要我们开发人员考虑如何使网站在不同设备上有更好的浏览体验。

其中一个关键问题就是如何让网站的标题在不同屏幕大小上都能良好地显示。一种解决方案是使用CSS中的@viewport规则，该规则用于指定浏览器视口的大小和缩放比例。下面是一个使用@viewport规则的例子：

@viewport {
width: device-width;
zoom: 1.0;
}

上面的代码表示将视口的宽度设置为设备的宽度，并将缩放比例设置为1.0，即不进行缩放。这样可以确保在不同设备上显示的内容大小和比例基本一致。

接下来，我们需要使用CSS的媒体查询功能来实现标题的按屏幕缩放字体效果。下面是一个使用媒体查询的例子：

@media screen and (max-width: 480px) {
h1 {
font-size: 20px;
}
}
@media screen and (min-width: 481px) and (max-width: 768px) {
h1 {
font-size: 30px;
}
}
@media screen and (min-width: 769px) {
h1 {
font-size: 40px;
}
}

上面的代码根据不同屏幕宽度设置了不同的标题字体大小。其中，第一个媒体查询表示在宽度小于或等于480px的屏幕上，标题字体大小为20px；第二个媒体查询表示在宽度在481px到768px之间的屏幕上，标题字体大小为30px；第三个媒体查询表示在宽度大于或等于769px的屏幕上，标题字体大小为40px。

总结一下，通过使用CSS中的@viewport规则和媒体查询功能，我们可以实现网站标题的按屏幕缩放字体效果，从而让用户在不同设备上都能有良好的浏览体验。