可以使用以下代码示例来解决此问题：

1. 在HTML中添加以下元标记，使渲染引擎解析Viewport。

2. 在样式表中使用以下CSS媒体查询来针对不同的设备类型定制样式:

@media only screen and (max-width: 768px) {
  /* CSS样式 */
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  /* CSS样式 */
}

@media only screen and (min-width: 1025px) {
  /* CSS样式 */
}

3. 在Angular Universal的预渲染配置中添加以下选项来启用DSP模块（Device Specific Properties）和自适应CSS：

{
  //其他配置项
  "renderOptions": {
    "deviceUrl": "http://localhost:4200",
    "exportHref": "index.html",
    "inline": false,
    "initialNavigation": "enabled",
    "documentFilePath": path.join(__dirname, "../dist/index.html"),
    "extraProviders": [
      provideModuleMap(LAZY_MODULE_MAP),
      {
        provide: REQUEST,
        useFactory: (req: Request) => req,
        deps: [Request],
      },
      {
        provide: RESPONSE,
        useFactory: (req: Request, res: Response) => res,
        deps: [Request, Response],
      },
      {
        provide: 'REQUEST_ORIGIN',
        useValue: 'http://localhost:4200'
      },
      {
        provide: APP_BASE_HREF,
        useValue: '/'
      },
      {
        provide: 'IS_API_URL',
        useValue: false
      },
      {
        provide: PLATFORM_ID,
        useValue: 'server'
      },
      {
        provide: 'WINDOW',
        useValue: {}
      },
      // 添加以下选项
      {
        provide: CHECK_MOBILE_DEVICE,
        useValue: true
      },