Question

我有一个网站，为“桌面”和“移动”访问者使用单独的模板;该网站包括“切换到桌面/移动”链接，以允许访问者更改查看模式。我正在开发一个新的响应式 UI元素，其HTML和CSS可以在桌面和移动模板上同样运行。出于以下示例的目的，我们假设它是一个新的页眉。

桌面页面的示例标记：

<html class="desktop">
  <head>…</head>
  <body>
    <div class="responsive_nav">Navigation bar content</div>
    <div>Desktop body content</div>
  </body>
</html>

移动页面标记示例：

<html class="mobile">
  <head>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    …
  </head>
  <body>
    <div class="responsive_nav">Navigation bar content</div>
    <div>Mobile body content</div>
  </body>
</html>

由于我的移动模板包含元视口标记，而桌面页面没有，因此当移动浏览器的用户在移动模式下加载页面时，页面将呈现在适合用户代理的layout viewport内屏幕尺寸。即，她会看到响应头部的“小”/“移动”断点。

如果她切换到桌面模式，加载没有元视口标记的页面模板，她会看到桌面大小的页面缩小了，新的标题呈现在“大”/“桌面”断点处。 / p>

我的问题是：响应式标头出现在“放大”/“小”/“移动”断点时需要做些什么，同时保持桌面模板内容的其余部分缩小吗

换句话说，让页面的一部分（标题）表现得好像存在元视口标记（小的，适合设备的布局视口大小），页面的其余部分表现得好像没有元视口tag（大型，“桌面大小”布局视口）。

换句话说，让页面的一部分表现得好像我们处于一个（小/移动）屏幕断点，而页面的另一部分就像大/桌面断点一样。

我尝试过的解决方案不起作用：

在标头上使用非标准CSS zoom属性。这使得标题更大，并将其保持在屏幕宽度内，但不会更改应用哪个断点。效果是一个较大的，压扁的桌面标题内容，而不是移动断点。
使用CSS transform: scale。这比zoom更糟糕，因为它不会导致断点更改和标题不会限制在屏幕内（可视视口）。

可能但不受欢迎的解决方案：巨型导航栏

制作导航栏小断点的巨大尺寸变体，以便在移动设备上缩小视图时，看起来它实际上是“正常移动尺寸”。即，制作智能手机断点的副本并进行扩展（字体大小，宽度，边距，所有内容）。

我认为这需要大量重复的CSS，并且可能需要重复标记，并禁止使用vh/vw一些魔法，可能无法以与屏幕大小完全匹配的方式完成。

还有其他可能吗？

在页面

我尝试过的解决方案不起作用：

可能但不受欢迎的解决方案：巨型导航栏

0 个答案: