Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

移动设备上边框变粗的问题

  当我们使用1像素的边框时候,在一些移动设备中可能会被渲染成更粗的边框。实际上这是边框的位置正好落于一个不是整数的像素位置上。类似于以前介绍过的Canvas2D线宽问题,但也不完全一样。移动设备上造成这个问题的根本原因是设备像素比的差异。
  现在很多移动设备的设备像素比都是大于1的,因此在展示网页时总是需要缩放。假如一个移动设备的设备宽度是380像素,屏幕水平方向有570个物理像素,这就意味着它的设备像素比是1.5。如果网页在设计时使用width=device-width,那么它就需要被放大。于是CSS中的1像素变成需要1.5个物理像素来显示,这就是像素不整,所以出现类似Canvas2D线宽问题的情况。
  这个问题还真不太好解决,我暂时没有找到完美的解决方案。比较正常的解决方案是给页面添加target-densitydpi=device-dpi,把页面的设备像素比强制调到1(也就是增大device-width到物理像素宽度)。这样就不会再出现边框变粗的问题了,但其副作用很大。整个页面的东西变小了,眼神不好的用户可能都看不清内容;按钮之类的也变小了,手指粗的用户可能点不中按钮。如果真要用这个方法解决,实际上只要将设备上的非整设备像素比floor到一个整数上就行了,因为整数的设备像素比不存在那些问题。
  其实这不仅是Web的问题,App开发同样会遇到。很多开发者根本就无视这个问题,但我觉得这个问题要是不解决的话,就像挤牙膏从中间捏一样会让我很不爽。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^