Question

我有一个1200px宽的页面（但这可能会改变）。我有一个我无法改变的视口：

<meta name="viewport" content="initial-scale=1, width=device-width">

我正在尝试编写一个脚本，如果你来到页面的设备宽度超过601px且宽度小于1025px，屏幕将缩小到页面宽度。目前设备将加载页面并显示第一个768px，然后用户必须缩小以查看剩余的1200px。

这有点像我想要的：

if(window.innerWidth > 600 && window.innerWidth < 1024){
  var defaultDeviceWidth = window.innerWidth;
  var defaultPageWidth = document.getElementById('wrapper').offsetWidth;
    if(defaultDeviceWidth < defaultPageWidth){
    document.querySelector('meta[name="viewport"]').content = 'initial-scale='+
      (defaultDeviceWidth/defaultPageWidth)+
      ', maximum-scale='+(defaultDeviceWidth/defaultPageWidth)+
      ', user-scalable=yes';
  }
}

将输出：

<meta name="viewport" content="initial-scale=0.64, maximum-scale=0.64, user-scalable=yes">

问题是，最大比例缩放视图但不允许用户根据需要放大。

本质：

我希望平板电脑可以缩小到页面限制，就像你在使用javascript时一样紧缩。

Answer 1

我认为最适合所有设备的观众网站布局的一种流行方法是使用响应式类（媒体查询，引导程序，jquery-mobile等）。

加载动态CSS样式的其他方法可以是使用刷新触发器以不同的设备分辨率加载特定的* .css。

在转换为HTML并在客户端显示之前，您是否考虑过使用动态if-else来回显不同的视口元标记？

如何将视口动态设置为页面限制

1 个答案: