根据窗口大小调整无响应网站的最佳方式

Best way to adjust non-responsive websites to window size?

本文关键字：网站 最佳 方式 响应 窗口大小 调整      更新时间：2023-09-26

我建立了一个无响应的网站（这是一个"实验/艺术"网站，屏幕上发生了太多事情，无法使其响应。）

我显然不包括手机，但我想让它也适用于平板电脑

现在该网站的宽度为1280px，所以它不会在平板电脑上正确显示

然而，当用户在平板电脑上时，我可以相应地缩小我网站的主体，对吗？

你认为下面的脚本会奏效吗：

var resizeSite = function (originalWidth, minWidth)
{
   var resize = function ()
   {
      var currentWidth = $(window).width();
      var zoom = currentWidth / originalWidth;
      if ((currentWidth < originalWidth) && (currentWidth >= minWidth))
      {          
         $('body').css({
            zoom: zoom,
           '-moz-transform' : 'scale(' + zoom + ')'
         });
      }
   };
   resize();
   $(window).resize(function ()
   {
      resize();
   });
};
resizeSite(1280, 980);

缩小显然会扭曲质量，但我想总比什么都没有好。

有更好的选择吗？或者上面的脚本有什么问题吗？

缩小时有没有办法防止文本模糊（对于某些缩放值）？

您可以尝试将视口元标记添加到页眉中。它的作用是将屏幕的宽度设置为与设备的宽度相匹配。有几个选项与视口标记关联，因此请查看以下链接以获取详细信息。：-）

http://css-tricks.com/snippets/html/responsive-meta-tag/

<meta name="viewport" content="width=device-width, initial-scale=1">
相关文章：