正常的页面设置了<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版页面完全无法看,字体图片你都要重新设置更大号,而且还不是按比例的,你慢慢调试吧。
时间: 2024-10-14 16:47:45