【问题标题】:Support for target-densitydpi is removed from WebKit从 WebKit 中删除了对 target-densitydpi 的支持
【发布时间】:2023-04-10 12:33:01
【问题描述】:

根据https://bugs.webkit.org/show_bug.cgi?id=88047 WebKit 从视口参数中删除了对 target-densitydpi 的支持。不幸的是,错误描述既没有说明更改的动机,也没有说明解决方法。

某些想要防止在移动设备上缩放的网页具有以下视口声明:

<meta name="viewport" content="width=device-width, 
initial-scale=1.0, maximum-scale=1.0, 
user-scalable=no, target-densitydpi=device-dpi"/>

现在此代码在 Chrome 中输出错误(使用 21.0.1180.49 beta-m 测试)。请建议使用 target-densitydpi=device-dpi" 使网页没有错误消息并保持与以前相同的行为的假定方法是什么

【问题讨论】:

    标签: google-chrome webkit


    【解决方案1】:

    您是否尝试过添加minimum-scale?很遗憾,我没有安卓手机,所以无法为你测试。

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    

    【讨论】:

      【解决方案2】:

      webkit-dev 邮件列表线程 http://lists.webkit.org/pipermail/webkit-dev/2012-May/020847.html 包含有关功能删除的讨论(或至少是背景)。

      简而言之,WebKit 在设备上呈现时有几种缩放页面的方法,这非常令人困惑(考虑到每个平台都依赖于自己的方法来实现这一点,更是如此。)

      更新

      根据上述补丁作者 Adam Barth 对上述线程的评论,

      有些应用会使用 target-densitydpi 与 Android 捆绑在一起,但人们似乎愿意弃用 功能并将这些应用程序迁移到使用其他机制,例如 响应式图片CSS设备单元

      如您所见,对于target-densitydpi 属性所提供的内容,响应式图像和 CSS 设备单元似乎是推荐的“解决方法”。此外,同一线程上的另一条评论提到,即使有了这个属性,对于不支持该属性的浏览器环境,Web 开发人员也必须以另一种方式重新实现相同的页面。

      我相信最近引入的subpixel layout 将成为缓解属性删除问题的另一种方法。

      更新 2

      This blog post 提出了另一种为 Android Chrome 布局页面的方法。没有解决方法可以自动让您“保持相同的行为”您的页面。你只需要重新构建它们。

      【讨论】:

      • 但这并不能真正回答原帖最后一段中的问题。
      【解决方案3】:

      我使用这个 jQuery 在最新的 Android 版 Chrome 上实现了同样的功能:

      <meta content='user-scalable=no, initial-scale=1, width=device-width' id='viewport' name='viewport'>
      
      var viewPortScale = 1 / window.devicePixelRatio;
      
      $('#viewport').attr('content', 'user-scalable=no, initial-scale='+viewPortScale+', width=device-width');
      

      这会将初始比例视口元标记设置设置为 1 CSS 像素 == 1 设备像素的正确比例。

      您不能使用 'width='+screen.width,因为 screen.width 不返回物理像素尺寸。我尝试在 Chrome 中的 Nexus 7 上使用 http://responsejs.com/labs/dimensions/,所有数字都是视口像素。

      【讨论】:

      • 测试了很多解决方案,到目前为止,这是唯一在 Nexus 4 + Chrome 上正常工作的解决方案
      • 一个类似的方法应该是将 body 的 css zoom-property 设置为 1 / window.devicePixelRatio。
      • 你是天才兄弟!非常感谢
      • 非常感谢!它帮助我创建了真正的像素布局。在滚动位置四舍五入时提供帮助(它永远不会是小数)。
      【解决方案4】:

      我不确定,但也许可以通过将视口元标记中的“宽度”设置为等于“物理”像素中的屏幕宽度来模拟target-densitydpi。不幸的是,AFAIK,没有 100% 的方法来获取设备像素宽度,但是类似

      <meta name="viewport" id="metaViewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
      <script>
      if(navigator.userAgent.toLowerCase().indexOf('android') > -1)
          document.getElementById('metaViewport').setAttribute('content', 'width='+screen.width+', initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
      </script>
      

      应该适用于大多数 Android (James Pearce: First, Understand Your Screen)。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-06-05
        • 2018-04-27
        • 2022-01-01
        • 1970-01-01
        • 2013-02-19
        • 1970-01-01
        相关资源
        最近更新 更多