关于手机端显示页面一个像素的边框变粗的问题

正常的页面设置了<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1"> 之后 手机端的border细线 及时设置了1px的宽度也会虚化变宽。

如何解决这个问题，最简单的方式是定义border-width: 1px;border-image: url(bg.jpg) 2 repeat; 其中bg.jpg可以设计成6x6 的 一张图片

搞定。

这样做也有一些劣势 比如圆角怎么解决，另外两个大牛给出了他们的解决方案。

http://www.th7.cn/web/html-css/201505/103090.shtml

http://blog.csdn.net/huang100qi/article/details/47355277

但也有人坑爹的提出，想要真正的1个像素的细线，可以把手机版页面设为

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

这样做的后果是，PC版页面完全无法看，字体图片你都要重新设置更大号，而且还不是按比例的，你慢慢调试吧。